Question

有问题的应用基本上是DOM检查器工具，类似于使用普通JS制作的Chrome开发工具中提供的工具。基本上，当用户单击元素时，用户应该可以使用诸如类名，xpath和文本之类的属性。我遇到了一个问题：当用户单击链接或按钮之类的元素时，浏览器将导航到预期的页面。我尝试使用以下代码来防止此问题：

var target = getSelectedElementFromPoint(e.clientX, e.clientY); // target has the element the user wants to inspect
if(target.nodeName.toLowerCase() == "a" || target.nodeName.toLowerCase() == "button"){
        e.stopPropagation(); // e is the event
        e.preventDefault();
 }

代码的目的是获取用户单击的元素，检查它是锚标记还是按钮，如果是，则阻止事件进一步进行。但是，它无法按预期方式工作，只需单击鼠标，它仍会导航到页面。

任何帮助将不胜感激。

编辑：请注意，我不能在此特定实例中使用jQuery。谢谢

EDIT2：可能早些时候应该提到过，但是我忘了。我实际上也尝试过return false。使用return false可以实现所需的功能，但是唯一的问题是，一旦用户离开“检查模式”，该链接将不再可单击，并且这不是理想的行为。

基本上我想要的是，当用户进入“检查模式”时，所有链接都是不可点击的。一旦删除“检查模式”，这些链接就应该可以单击。我没有禁用页面上的所有链接，而是禁用了用户单击的链接。

Answer 1

解决方案是简单地将代码包装在'inspectMode'的检查中。 'inspectMode'应该是布尔变量。

将以下代码添加到事件处理程序中：

if (inspectMode)
{
    var target = getSelectedElementFromPoint(e.clientX, e.clientY);
    if(target.nodeName.toLowerCase() == "a" || target.nodeName.toLowerCase() == "button")    
    {
        e.stopPropagation(); // e is the event
        e.preventDefault();
        return false;
    }
}
return true;

e.preventDefault（）和e.stopPropagation（）不能按预期运行

1 个答案: