我有以下代码：<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">
<button class="btn btn-primary" disabled>
<p>my text</p>
</button></div>结果：当我点击 div 时，#question我会转到另一个页面。但是当我单击该按钮时，我也会转到另一个页面。然而我的按钮被禁用了......当我点击按钮时，我不想进入另一个页面。在Firefox中，当我单击按钮时没有任何反应（这就是我想要的）。但在Chrome中我会转到另一个页面...有人可以帮助我永久禁用该按钮吗？我使用 HTML5 和 Bootstrap 4
4 回答
梦里花落0921
TA贡献1772条经验 获得超5个赞
该按钮被禁用，并且完全按照其应有的方式工作（防止按钮的默认操作）。
但是，默认情况下，click事件是冒泡的。这实际上意味着页面中任何元素上的任何此类事件不仅会在该特定元素上触发，还会在其每个父元素上触发，直到document链中的某个元素停止冒泡。
要阻止click事件（或任何其他冒泡事件）冒泡，您必须stopPropagation()对其调用方法。
在你的情况下：
document.querySelector('#question btn').addEventListener('click', function(e) {
e.stopPropagation();
})...或者，在 jQuery 中：
$('#question btn').on('click', e => { e.stopPropagation() });现在你的按钮不会将点击事件传递给div。如果启用它，它将执行您想要的操作，如果未启用，则不会。无论哪种情况，他们<div>都不会有任何线索。
如果您只想在按钮禁用时取消冒泡，请将选择器从更改#question btn为#question btn[disabled]
慕丝7291255
TA贡献1859条经验 获得超6个赞
尝试将 移动onclick到<button>自身而不是周围<div>。按钮的属性disabled将无法禁用onclick应用于其父元素的属性。
在下面的两个示例中，我对其进行了样式设置，以便您可以看到周围的div（蓝色）和button. 请注意，只有在单击 div 时，警报才会在顶部示例中触发。
我假设你的样式意味着你看不到 div 和按钮之间的区别，并且由 Chrome 和 Firefox 来决定你是单击禁用的按钮还是 div。
div {
background: blue;
padding: 1em
}
<div onclick="alert('test')">
<button disabled>my text</button>
</div>
div {
background: blue;
padding: 1em
}
<div>
<button disabled onclick="alert('test')">my text</button>
</div>
慕尼黑8549860
TA贡献1818条经验 获得超11个赞
您在 div 内有按钮，因此当您单击该按钮时，您也单击了 div。您也可以按照自己的方式进行操作，只需检查 event.taget 是否是一个按钮。如果是，则不要访问该网址，如果不是，则前往。
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">xxx
</div>
<div>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
哔哔one
TA贡献1854条经验 获得超8个赞
如果你想将按钮保留在 div 中，你应该使用event.stopPropagation();. 尝试以下代码。
<body>
<div id="question" onclick="goLink();" style="cursor:pointer;">
<button class="btn btn-primary" onclick="noLink(event);">
<p>my text</p>
</button>
</div>
<script>
function goLink(){
window.location.assign("{% url 'read_question' question.id %}");
}
function noLink(){
window.alert("I didn't go anywhere.");
event.stopPropagation();
}
</script>
</body>
还有一个event.stopImmediatePropagation();方法。我希望这可以帮助你。
- 4 回答
- 0 关注
- 153 浏览
添加回答
举报
0/150
提交
取消