防止對體內所有元素進行點擊動作

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中單擊定位標記，則會將我帶入鏈接網址。

不僅是iframe內的錨定標記，其他元素也會發生這種情況。

防止對除某些元素之外的體內所有元素執行單擊動作的正確方法是什么？

Answer 1

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

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

正在運行的JSFiddle演示 。

此外，您的第一個button元素的onclick確實不會做任何事情。 您的e.preventDefault()該問題，因為沒有什么可以阻止的。 默認情況下，沒有為window.location分配url屬性，您只需將其添加到window.location 。 這應該只是：

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

防止對體內所有元素進行點擊動作

問題描述

1 個解決方案

解決方案1
1 2015-03-13 18:03:19

防止對體內所有元素進行點擊動作

問題描述

1 個解決方案

解決方案1 1 2015-03-13 18:03:19

解決方案1
1 2015-03-13 18:03:19