function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
} .dropbtn {
background-color: #3498DB;
color: white;
padding: 10px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
pointer-events: all;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd; display: block;}
.show {display: block;}<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>
<body>
<div id="dropdown">
<button class="dropbtn fas fa-bars fa-2x" onclick="myFunction()" style="visibility: visible;"></button>
<div id="myDropdown" class="dropdown-content">
<a href=""> DROPDOWN CONTENT </a>
<a href=""> DROPDOWN CONTENT </a>
<a href=""> DROPDOWN CONTENT </a>
</div>
</div>
</body> 亲爱的 stackoverflow，我目前正在编写一个顶部导航栏，使用这个菜单下拉按钮，这段代码工作正常，但是当点击 font awesome 图标的白色部分时，它不会触发 javascript 事件。
有没有办法让菜单图标也可以点击？或者让它对鼠标指针事件不可见。
谢谢你
最佳答案
您当前代码的问题是图标在 button 中呈现为 svg。这是一个独立的元素，onclick 属性不适用于它。
解决这个问题的最好方法是为图标 SVG 显式地将 pointer-events 设置为 none:
.dropbtn > svg {
pointer-events: none
}
pointer-events 属性规定了 UI 应该如何响应对象上的事件。通过将其设置为 none，我们表示该对象不处理事件，因此它们将传递给 SVG 下的对象。
显示此内容的工作片段如下所示。
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.dropbtn {
background-color: #3498DB;
color: white;
padding: 10px;
font-size: 10px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
pointer-events: all;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1200;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd; display: block;}
.show {display: block;}
.dropbtn > svg {
pointer-events: none
}<script src="https://use.fontawesome.com/releases/v5.11.2/js/all.js" data-auto-replace-svg="nest"></script>
<body>
<div id="dropdown">
<button class="dropbtn fas fa-bars fa-2x" onclick="myFunction()" style="visibility: visible;"></button>
<div id="myDropdown" class="dropdown-content">
<a href=""> DROPDOWN CONTENT </a>
<a href=""> DROPDOWN CONTENT </a>
<a href=""> DROPDOWN CONTENT </a>
</div>
</div>
</body>关于javascript - 如何使字体很棒的图标可点击事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58372943/