JavaScript点击事件传入对象报错:uncaught Sy

2021-10-26 本文已影响0人执笔于情

摘取自CSDNqq_34412985大佬的博客

今天在开发的时候遇到一个问题, 在js动态渲染页面的时候(前后端不分离项目), 后台PHP这边需要传入一个参数给他, 是一个对象.

代码

图里是模板字符串和要渲染的元素, 需要点击购物车button按钮, 弹窗弹窗框, 点击事件传入一个对象
但是我们直接传入对象, 去点击事件里打印, 会发现

<button onclick="handleClick(row)"></button>

function handleClick(row) {
  console.log(row)
}

假设row是一个对象的话,会报Sncaught SyntaxError: Unexpected identifier错误。
经查，onclick（对象）这种传递对象形式里面的对象会变成onclick（[object Object]）

为什么会出现 onClick([object object])

出现这种情况，就是我们渲染 Dom 节点的时候，是用的字符串拼接形式。所以，对于 onclick 事件中的参数，我们也因该转化成字符串的形式进行拼接。如果传入一个 js 自定义对象，那渲染后的页面上的 dom 就会出现 onClick([object object]) 这种形式。

问题解决思路

将传递的对象参数转化为json字符串，需要的时候再将json字符串的双引号转换成单引号就可以
问题解决方法
用JSON.stringify().replace(/""/g,"’")方法将对象转化成JSON字符串传递，函数接收后会变成对象
问题解决过程
JSON.stringify()将对象转化成JSON字符串；.replace(/""/g,"’")将JSON字符串中的双引号转化成单引号，不然会报Unexpected end of input错误（这个错误是由于带的json字符串。它的双引号与onclick控件的双引号冲突了）

传递参数

var $row = JSON.stringify(row).replace(/\"/g,"'");//row的是一个对象
<a href="#" οnclick="editParentRow('+$row+')">编辑</a>//拼接传递对象

接收参数

function editParentRow(obj){
console.log(obj);//console打印
alert(obj);//提示框

pageHtml+="<a href='#' οnclick='gotoP(\""+value+"\",\""+tabId+"\","+(pageNo+1)+","+dataFlag+","+elements+")'>下一页></a>"; 

function gotoP(searchValue,tabId,pageNo,dataFlag,element){
    findData(searchValue,tabId,pageNo,dataFlag,JSON.stringify(element));
}

onclick传入的为string，在gotoP函数中element类型变为object，类似于类型提升

所以我这边的解决代码是

`<button onclick="handleClick(${JSON.stringify(row).replace(/\"/g,"'")})"></button>`

function handleClick(row) {
  console.log(row)
}

这样就可以打印出这个对象了

JavaScript点击事件传入对象报错:uncaught Sy

猜你喜欢

热点阅读