从 div 的子元素中删除 'onclick' 命令

Question

我正在开发一个网站（链接），其中有一个主要的div。我希望这个div上的所有页面区域都可以作为一个链接（点击它将会提交一个表单并跳转到另一个页面），因此我在该div中添加了以下属性：

<div class="box1" onclick="javascript:document.forms['womenForm'].submit();" ...>

这个区域里的所有内容都应该链接到下一页，除了这个div里面的一个HTML选择器，它应该在不跳转到下一页的情况下可点击。

我该如何做到这一点？我尝试用一个div包裹所选元素，并给它设置href = ""或onclick = ""，但表单仍然会被提交。

有人能解决这个问题吗？

- Spiderman

Answer 1

您需要阻止事件向上冒泡到层次结构中...

使用onclick属性，您可以在选择元素上使用以下内容来实现：

onclick="event.cancelBubble=true;if(event.stopPropagation) event.stopPropagation();return false;"

- Gabriele Petrioli

Answer 2

首先，您的代码中使用了 "onclick" 属性，因此javascript: 伪协议是多余的。

我建议您远离内联 JavaScript，尝试使用更可接受的 不侵入式JavaScript。

无论如何，您想要做的就是检查事件是否未在 <select> 元素上触发。使用不侵入式JS，可以这样写：

someElement.onclick = function(e) {
    var target = e ? e.target : event.srcElement;
    if (!/option|select/i.test(target.nodeName)) {
        // do stuff.
    }
};

- James

---

这是最简单的方法吗？我不能在HTML定义的一部分中从子元素中删除其上层父元素的属性吗？ - Spiderman