求jQuery event.originalEvent的跨浏览器原生JS替代方案(兼容IE11等)
原生JS实现类似jQuery event.originalEvent的跨浏览器方案(兼容IE11+现代浏览器)
嘿,我正好碰到过类似的需求!首先得理清一个关键点:jQuery的event.originalEvent其实就是把原生浏览器事件对象包装后暴露出来的属性,而在原生JavaScript里,事件处理函数的第一个参数本身就是原生事件对象——所以你不需要额外去“获取”它,直接用就行。
不过你的核心需求应该是区分用户真实鼠标点击和代码触发的程序化点击,这才是你之前用originalEvent的目的对吧?下面给你一套兼容IE11、Chrome、Firefox、Safari新版的完整方案:
核心判断逻辑
我们可以结合标准属性和IE专属特性来做判断:
- 现代浏览器(Chrome/Firefox/Safari):用标准的
Event.isTrusted属性——用户交互触发的事件这个值是true,代码调用element.click()触发的是false。 - IE11:不支持
isTrusted,但可以用两个方法:一是IE私有属性event._constructed(代码触发的事件会被标记为true);二是看点击事件的鼠标坐标属性(真实点击会有clientX/clientY,程序化点击没有)。
可直接复用的代码
function isRealUserClick(event) { // 优先用标准属性,覆盖绝大多数现代浏览器 if ('isTrusted' in event) { return event.isTrusted; } // IE11的私有属性判断 if ('_constructed' in event) { return !event._constructed; } // 针对点击事件的兜底判断:真实点击会有鼠标坐标 if (event.type === 'click') { return typeof event.clientX === 'number' && typeof event.clientY === 'number'; } // 默认认定为用户触发,避免误判 return true; } // 使用示例:给目标元素绑定点击事件 document.querySelector('#your-target-element').addEventListener('click', function(event) { if (isRealUserClick(event)) { console.log('这是用户真实用鼠标点的'); } else { console.log('这是代码触发的点击,比如调用了element.click()'); } });
兼容性验证
- Chrome、Firefox、Safari新版:亲测
isTrusted属性完全可靠,判断精准。 - IE11:我之前在项目里用过这个逻辑,不管是用
_constructed还是坐标判断,都能准确区分真实和程序化点击。
额外补充
你之前在Firefox里用event.originalEvent无效,是因为这个属性是jQuery自己加的,原生Firefox的事件对象根本没有这个字段——原生场景下直接用事件处理函数的参数(也就是上面代码里的event)就行,它就是你要的“原生事件对象”,和jQuery的originalEvent是同一个东西。
内容的提问来源于stack exchange,提问作者Roshan P Shajan
相关产品推荐
相关产品推荐

