防止事件冒泡(用于javascript onclick事件)

Preventing event bubbling (for javascript onclick events)

本文关键字：事件 javascript onclick 用于      更新时间：2023-09-26

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

  • 其中div class="btnMask"是由我的javascript添加的。

加上以下JQuery:

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

当我点击。btnmaskdiv时，我如何去停止标签发射?而且(如果这个问题的答案不能使我的另一个问题的答案显而易见……)我怎么打开和关闭它?(我有一个函数检查下拉onchange并将z-index设置为99/-99，所以我想更改它以合并这个新方法。)

提前感谢您的帮助。

& lt; & lt;编辑>>

使用这个问题的最初答案，我设法解决了使用常规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.p preventdefault ();和e.p stoppropagation ();不适合我的原始示例(大概是因为他们使用onclick而不是href ?)。

是否有一种方法来做同样的事情作为 . preventdefault ();和 . stoppropagation ();正在做我的。btnmaskdiv，但也将处理包含的链接是由一个onclick触发?

感谢

& lt; & lt;编辑>>

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

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

$('.btnMask').click(function() {
    return false;
});
或者使用preventDefault和stopPropagation 
$('.btnMask').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

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

onclick处理程序在jquery click处理程序之前触发。你可以这样做

    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>

如果你从btnMaskdiv中删除类test，那么pagessubmit处理程序将不会被调用。

相关文章：