Question

如何跨文档进行跨浏览器和跨平台点击？我试过了：

        var clickEvent = function (e) {
            console.log(123);
        };

        var body = document.getElementsByTagName('body')[0];
        body.onclick = clickEvent;
        document.addEventListener("click", clickEvent);
        window.addEventListener("click", clickEvent);
        body.addEventListener("click", clickEvent);

但是在不同的浏览器中，它的工作次数很少。如何使它只工作一次？

Answer 1

最好用的是

document.addEventListener("click", clickEvent);

删除其他的。由于您处理多个元素（window，document和document.body）上的点击事件，因此它会多次运行。它们都会触发，因为视口内的所有点击都会触发这些对象上的单击事件。您的代码应如下所示：

var clickEvent = function (e) {
    console.log(123);
};

document.addEventListener("click", clickEvent);

编辑：如果您想获得最大兼容性，请使用onclick：

var clickEvent = function (e) {
    console.log(123);
};
document.onclick = clickEvent;

Answer 2

使用addEventListener()的IE浏览器可能存在问题，因为一些旧的Internet浏览器浏览器没有实现它，但它有attachEvent。因此，您可能也希望将其绑定，并且应用程序浏览不仅限于桌面设备。用户可能位于移动设备上，因此您可以使用touch等touchstart/touchend个事件：

var clickEvent = function(e) {
  console.log(itHas, 123);
};
var body = document.body; // get the document's body
var itHas = document.implementation.hasFeature(addEventListener), // check for the
docClick, //                                                feature implementation. 
ev = navigator.userAgent.indexOf(/mobi/g) !== -1 ? "touchstart" : "click";
// above will use an event based on user agent like for mobile it will use touch event
// and for desktop/laptops click event.
if(itHas){
  docClick = body.addEventListener;
}else{
  docClick = body.attachEvent;
}
docClick(ev, clickEvent);

跨浏览器和跨平台点击文档

2 个答案: