我正在使用 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 触发的包含链接?
谢谢
<< 编辑 >>
更新了问题标题以反映确切的问题,而不仅仅是常规链接上的事件冒泡。