我有以下代碼：<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>結(jié)果：當(dāng)我點擊 div 時，#question我會轉(zhuǎn)到另一個頁面。但是當(dāng)我單擊該按鈕時，我也會轉(zhuǎn)到另一個頁面。然而我的按鈕被禁用了......當(dāng)我點擊按鈕時，我不想進入另一個頁面。在Firefox中，當(dāng)我單擊按鈕時沒有任何反應(yīng)（這就是我想要的）。但在Chrome中我會轉(zhuǎn)到另一個頁面...有人可以幫助我永久禁用該按鈕嗎？我使用 HTML5 和 Bootstrap 4
4 回答
夢里花落0921
TA貢獻(xiàn)1772條經(jīng)驗 獲得超6個贊
該按鈕被禁用，并且完全按照其應(yīng)有的方式工作（防止按鈕的默認(rèn)操作）。
但是，默認(rèn)情況下，click事件是冒泡的。這實際上意味著頁面中任何元素上的任何此類事件不僅會在該特定元素上觸發(fā)，還會在其每個父元素上觸發(fā)，直到document鏈中的某個元素停止冒泡。
要阻止click事件（或任何其他冒泡事件）冒泡，您必須stopPropagation()對其調(diào)用方法。
在你的情況下：
document.querySelector('#question?btn').addEventListener('click',?function(e)?{
??e.stopPropagation();
})...或者，在 jQuery 中：
$('#question?btn').on('click',?e?=>?{?e.stopPropagation()?});現(xiàn)在你的按鈕不會將點擊事件傳遞給div。如果啟用它，它將執(zhí)行您想要的操作，如果未啟用，則不會。無論哪種情況，他們<div>都不會有任何線索。
如果您只想在按鈕禁用時取消冒泡，請將選擇器從更改#question btn為#question btn[disabled]
慕絲7291255
TA貢獻(xiàn)1859條經(jīng)驗 獲得超6個贊
嘗試將 移動onclick到<button>自身而不是周圍<div>。按鈕的屬性disabled將無法禁用onclick應(yīng)用于其父元素的屬性。
在下面的兩個示例中，我對其進行了樣式設(shè)置，以便您可以看到周圍的div（藍(lán)色）和button. 請注意，只有在單擊 div 時，警報才會在頂部示例中觸發(fā)。
我假設(shè)你的樣式意味著你看不到 div 和按鈕之間的區(qū)別，并且由 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貢獻(xiàn)1818條經(jīng)驗 獲得超11個贊
您在 div 內(nèi)有按鈕，因此當(dāng)您單擊該按鈕時，您也單擊了 div。您也可以按照自己的方式進行操作，只需檢查 event.taget 是否是一個按鈕。如果是，則不要訪問該網(wǎng)址，如果不是，則前往。
<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貢獻(xiàn)1854條經(jīng)驗 獲得超8個贊
如果你想將按鈕保留在 div 中，你應(yīng)該使用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 關(guān)注
- 283 瀏覽
添加回答
舉報
0/150
提交
取消