Question

我正在尝试使用“选择”功能进行扩展：让用户点击页面上的任何元素并查看它的xpath。

但是，为了使其可用，我必须防止元素在点击时做出反应：我不想点击超链接将我转发到另一个页面，提交表单的按钮等等。

我该怎么做？

UPD：我只需要Chrome浏览器

Answer 1

我认为最干净的方法是在捕获阶段将一个事件处理程序绑定到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

Answer 2

仅限CSS解决方案：

* {
    pointer-events: none;
}

Answer 3

试试这个

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

Answer 4

在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()
}

如何使所有页面元素不对点击做出反应

4 个答案: