Question

我正在编写一个WYSWIG内联编辑器，除编辑器菜单元素外，所有元素都可编辑。

JS代码

$(function() {
    $("body").on("mousedown", function(e) {

        if($(e).target().is(".ignore")) {
            return;
        }

        //I hope it will stop the event to bubble up
        e.preventDefault();
        e.stopPropagation();
    });

    $("body").on("click", function(e) {
          e.preventDefault();
          e.stopPropagation();
    });
});

HTML

<body>
<a href="http://google">Google</a>
<button onclick="window.location.url='https://www.amazon.com'">Amazon</button>
<button onclick="alert('Ignore unbind')" class="ignore">Ignore</button>

<iframe src="http://w3schools.org" />

演示

http://jsfiddle.net/e7gbm557/2/

问题

在上面的内容中，按钮元素的click事件被禁止，但是如果你点击iframe里面的anchor标签，它会把我带入链接url。

不仅iframe中的锚标签，它也适用于其他一些元素。

除了某些元素外，阻止对主体内部所有元素进行点击操作的正确方法是什么？

Answer 1

您需要处理click事件，而不是mousedown事件：

$("body").on("click", function(e) {
    //I hope it will stop the event to bubble up
    e.preventDefault();
    e.stopPropagation();
});

Working JSFiddle demo

此外，您的第一个button元素onclick无论如何都不会做任何事情。你的e.preventDefault()没有做到这一点，因为没有什么可以阻止的。默认情况下，url没有分配window.location属性，您只需将其添加到window.location即可。这应该只是：

<button onclick="window.location='https://www.amazon.com'">Amazon</button>

防止对主体内的所有元素执行单击操作

1 个答案: