如何使所有页面元素不会对点击产生反应

我试图使用“选择”功能进行扩展：让用户单击页面上的任何元素并查看它的xpath。如何使所有页面元素不会对点击产生反应

然而，使其可用我必须防止元素从点击反应：我不想点击超链接转发我到另一页，按钮提交表单，等等等等

我会怎么做？

UPD：我需要它仅适用于Chrome

来源

2013-06-22 izhak

您想支持哪些浏览器？您可以通过设置事件处理程序来轻松实现捕获阶段的侦听，但在IE8及更低版本中不支持。 –

@FelixKling我只需要支持Chrome – izhak

在我看来，最干净的方法是将一个事件处理程序绑定到body在捕捉相和防止事件传播/默认行为。

你可以得到event.target一个参考点击的元素：

document.body.addEventListener('click', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    console.log(event.target); 
}, true);

的优点是，此事件处理程序将是第一个被触发，无论哪个其他的事件处理程序绑定到元素该页面（除非页面绑定了一个类似的事件处理程序到body，但通常事件处理程序绑定在冒泡阶段）。

欲了解更多信息，请参阅quirksmode.org - Event order和MDN - addEventListener。

DEMO

来源

2013-06-22 19:29:26

尽管这个解决方案是纯js而不是jQuery，但它似乎是jQuery方式中最相关和最容易重写的。谢谢。 – izhak

试试这个

$('body *').on('click',function(e){ 
    return false; 
});

来源

2013-06-22 19:26:04 JAVAGeek

你不是真正的Jon Skeet –

这个作品，谢谢！ – izhak

你假定jQuery可能不可用。 – 2013-06-22 19:30:49

对于一个CSS唯一的解决办法：

* { 
    pointer-events: none; 
}

来源

2013-06-22 19:27:22 Havsmonstret

+1 Nice [tag：HTML5]解决方案 – mate64

'在非SVG元素的CSS中使用指针事件是实验性的。 ' –

问题是如果设置此规则，是否会触发扩展的事件处理程序。 –

在你click事件处理程序，确保你要么调用preventDefault()在事件对象，或从您的函数返回false。例如：

function myClickHandler(e) { 
    e.preventDefault() // e is the event object 
    // Do your click stuff here 
    . 
    . 
    . 
    return false; // not required if you've called e.preventDefault() 
}

来源

2013-06-22 19:27:57

如何使所有页面元素不会对点击产生反应

回答

相关问题