示例代碼中第一個checkbox點擊時會觸發父級div的alert。第二個checkbox使用了stopPropagation來不顯示alert。但是貌似該方法不適用于popover。在點擊Add list item生成的list item中，點擊checkbox依然會跳出popover。該如何在點擊list item中的checkbox時不顯示popover呢？
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
</head>
<body>
<p>
<div class="container">
<div onclick='alert("div");'>
<p>The first checkbox displays an alert from the parent DIV when clicked. The second checkbox suppress the alert.</p>
<input type="checkbox"></input>
<input type="checkbox" onclick="suppressPopover()"></input>
</div>
<p><p><p><p><p>
<div class="card" style="height: 10rem;">
<div class="card-header">The same suppression technique applied on list items doesn't work for popovers.</div>
<ul id="list"></ul>
</div>
<p><p>
<button onclick="addListItem()">Add list item</button>
</div>
<script>
function suppressPopover() {
window.event ? window.event.cancelBubble = true : e.stopPropagation();
}
function addListItem() {
let listItem = document.createElement('li');
listItem.setAttribute("data-toggle", "popover");
listItem.setAttribute("tabindex", "0");
listItem.setAttribute("data-trigger", "focus");
listItem.setAttribute("title", "Title");
listItem.setAttribute("data-placement", "bottom");
listItem.setAttribute("data-content", "Details");
listItem.innerHTML = "<input type=\"checkbox\" onclick=\"suppressPopover()\"> List Item";
let ele = $(listItem);
ele.popover();
document.getElementById("list").appendChild(listItem);
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
let ele = $(listItem);ele.popover();
這部分注釋掉應該就可以了
實際應用的話就是加個判斷符合條件就運行這段就好了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/18681.html
標籤：JavaScript
上一篇：web前端入門知識大全分享