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

最新推荐文章于 2023-05-09 09:52:05 发布

骑着蜗牛去上班丶

最新推荐文章于 2023-05-09 09:52:05 发布

阅读量1.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：编程心得文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/sky21sjwzk/article/details/129858704

编程心得专栏收录该内容

12 篇文章

订阅专栏

当尝试通过onclick事件传递JavaScript对象时，会遇到SyntaxError，因为DOM解析不支持直接传递对象。解决方法是将对象转化为JSON字符串，例如使用JSON.stringify(obj).replace(//g,)，然后在函数中解析。示例代码展示了如何在show_detail函数中正确处理这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

各位小伙伴在开发过程中，想用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事件传值不可以直接传对象的解决办法