Question

我使用javascript与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>

其中带有class =“btnMask”的div由我的javascript添加。

加上以下JQuery：

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

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

提前感谢您的帮助。

＆LT;＆LT;编辑＆gt;＆gt;

使用对此的初步答案，我设法解决了使用常规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触发的包含链接？

感谢

＆LT;＆LT;编辑＆gt;＆gt;

更新问题标题以反映确切问题，而不仅仅是在常规链接上冒泡。

Answer 1

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

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

或使用preventDefault和stopPropagation

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

Answer 2

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

Answer 3

您的onclick处理程序在您的jquery单击处理程序之前被触发。你可以做这样的事情

    function pageSubmit() {
        alert('pageSubmit');
    }
    var link = document.getElementById('addToBasket');
    var linkClickHandler = link.onclick;
    link.onclick = null;
    $('.button').data('linkClickHandler', linkClickHandler);

    $('.button').on('click', function(e){
        var clickHandler = $(this).data('linkClickHandler');
        var link = $(this).find('a').get(0);
        clickHandler.apply(link, [e]);
    });

    $('.btnMask').on('click', function(e){
        if (!$(this).hasClass('test')) {
            e.preventDefault();
            e.stopPropagation();
        }
    });

和html为

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

如果从btnMask div中删除类测试，则不会调用pageSubmit处理程序，当它出现时，处理程序被调用。

防止事件冒泡（对于javascript onclick事件）

3 个答案: