我有以下代碼：<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條經驗 獲得超6個贊
該按鈕被禁用，并且完全按照其應有的方式工作（防止按鈕的默認操作）。
但是，默認情況下，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 關注
- 294 瀏覽
添加回答
舉報
0/150
提交
取消