2

我正在使用 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 触发的包含链接？

谢谢

<< 编辑 >>

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

4

3 回答 3

1

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

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

或者使用preventDefault和stopPropagation

$('.btnMask').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});
于 2013-04-08T10:35:18.397 回答
0 
$('.btnMask').click(function(e) {
    e.stopPropagation();
});
于 2013-04-08T10:32:57.390 回答
0

您的 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 处理程序，并且当它存在时会调用处理程序。

于 2013-04-08T12:03:30.377 回答