javascript - 防止事件冒泡(针对 javascript onclick 事件)

Question

我正在使用 javascript 与 CMS 交互，CMS 为用户提供了一个按钮，可以将东西添加到他们的购物篮中。但是，我正在使用 javascript 来尝试阻止客户这样做，除非他们从页面其他位置的下拉菜单中进行了选择。

因为有许多不同的按钮可能会让他们进入篮子(包括下面的示例)并且所有这些按钮都有不同的方法，而不是编写多行代码来阻止每个方法然后重新启用做出选择时的那个方法我正在尝试做一种“包罗万象”的修复，我只是用另一个 div 覆盖任何这样的按钮/链接，以便有效地“屏蔽”它下面的按钮，直到他们做出决定。

我首先尝试使用绝对定位的 div 来执行此操作，直到用户执行类似调整页面上文本框大小的操作后，我的绝对定位 div 突然出现在错误的位置!

所以我现在使用 JQuery 的 .wrap() 很好地解决了这个问题..但是..现在我不能使用 z-index 将 div 定位在所需按钮上方，因为这些按钮位于掩码内而不是下方它!

我已经阅读了很多关于事件冒泡的资料，但我不确定我是否还没有找到正确的信息，或者我理解正确，或者事件冒泡可能导致我走上了错误的道路，因为我似乎无法接受这些概念并将它们应用于这种情况。

所以.....

给定以下 HTML 结构:

<div class="btnMask">
    <div class="button">
        <a onclick="pageSubmit();return false;" href="#" id="addToBasket">
            <span>Add to Basket</span>
        </a>
    </div>
</div>

• 我的 javascript 添加了带有 class="btnMask"的 div。

加上以下 JQuery:

$('.btnMask').click(function() {
    // prevent default actions and alert the customer to select something;
});

单击 .btnMask div 时如何停止触发标记？和(如果那个答案不能使我的另一个问题的答案显而易见......)我将如何打开和关闭它？ (我有一个检查下拉 onchange 并将 z-index 设置为 99/-99 的函数，所以我想更改它以合并这个新方法。)

预先感谢您的帮助。

<<编辑>>

使用最初的答案，我设法解决了使用常规 href 将您带离页面的链接问题。

所以我现在已经修复了 HTML 如下所示的链接:

<div class="btnMask">
    <div class="button">
        <a id="nextPage" href="/link/toanotherpage.asp?id=667868465726122926234">
            <span>Click to go to Page 2</span>
        </a>
    </div>
</div>

但是，就像我说的那样，有许多方法可以用来将人们从页面和 e.preventDefault(); 和 e.stopPropagation(); 中带走不适用于我的原始示例(大概是因为他们使用的是 onclick 而不是 href ？)。

有没有办法做与 e.preventDefault(); 和 e.stopPropagation(); 在我的 .btnMask div 上做的相同的事情，但也会处理由 onclick 触发的包含链接？

谢谢

<<编辑>>

更新了问题标题以反射(reflect)确切的问题，而不仅仅是常规链接上的事件冒泡。

Answer 1

如果你想防止事件冒泡并取消默认操作，那么你可以从事件处理程序返回 false。

$('.btnMask').click(function() {
    return false;
});

或者使用preventDefault和 stopPropagation

$('.btnMask').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});