javascript对于onclick事件传值不可以直接传对象的解决办法

各位小伙伴在开发过程中，想用onclick事件传递参数进行业务处理，但是可能需要传输的对象是一个object,例如：

let obj = {'id':1,'detail':'iphoneX pro max'}
<a href="#" class="easyui-linkbutton btn" iconCls="icon-add"  plain="true" onclick="show_detail('+obj+')">查看详情</a>

报错如下

uncaught SyntaxError: Unexpected identifier

报错原因

Js在渲染 Dom 节点的时候，是要用的字符串拼接形式,所以在对于onlcick事件参数，我们应该转化为字符串的形式进行拼接
如果你传的是一个js自定义对象，那么在渲染后的页面dom上就会出现onClick([object object]) 这种形式。

解决方案

我们要将传递的参数先转化为一个json的字符串，并且若在需要的时候再吧json字符串用双引号转化为单引号即可
我们可以使用内置的json处理函数进行处理 JSON.stringify(obj).replace(/“”/g,“'”),经过这样处理函数接受到就会变成对象进行处理

function show_detail(obj) {
    var obj =JSON.stringify(obj).replace(/\"/g,"'");
    console.log(obj.id);
    console.log(obj.detail)
  }

javascript对于onclick事件传值不可以直接传对象的解决办法