我有一个带有onclick的按钮。按钮内有一个图像,但不会触发脚本。
function myFunction1() {
document.getElementById("rightdrop02").classList.toggle("show");
}
window.addEventListener('click', function(event) {
if (!event.target.matches('.rightmenubtn02')) {
var dropdowns = document.getElementsByClassName("right_content02");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
});
body {
background-color: limegreen;
}
.rightmenubtn01,
.rightmenubtn02,
.rightmenubtn03,
.rightmenubtn04,
.rightmenubtn05 {
border: none;
cursor: pointer;
color: white;
font-family: "focim";
font-size: 17px;
width: 100%;
line-height: 38px;
text-align: left;
padding-left: 20px !important;
border-bottom: solid 1px white;
background-color: transparent;
}
.right_content02,
.right_content03 {
display: none;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
z-index: 1;
}
.right_content02 a,
.right_content03 a {
border-bottom: solid 1px #00765a;
}
.right_content02 a,
.right_content03 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.rightmenu01 a:hover,
.rightmenu02 a:hover,
.rightmenu03 a:hover,
.rightmenu04 a:hover,
.rightmenu05 a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.right_img button:focus {
outline: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.right_img button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.right_img img {
float: right;
padding: 6px 16px 6px 0;
}
.right_img button {
padding: 0;
padding-left: 10px;
border-radius: 0;
}
<div class="right_img">
<div class="rightmenu02">
<button onclick="myFunction1()" class="rightmenubtn02">Button<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAA81BMVEX////eAADwe4mNGCX9ASD/AADdAAUYGBj5w8zhFxoIAAArKyvaAADEABapFxn/ASU9S0qNGCH/HCEzMzMkJCSpFx75AAD+DxI7OzudGCj/AAmpGCn/ABm/GCt8FyTOARn0mqT6zNf+8Pbta3Ltd4TmMDoiFxfob3Lwnq7tiJDkSU7cBw/iMT/qeHfnVVqDg4NKSkpyb299fHyioqKPj4+0tLQaGhoODg5PT09hYWEcJCIVAAAUIRuzAAjCAAlednRKXFoJGBczQkHpQ1XsTWaLFxf0pKpxLDRyGiT72Nv3uL3kGyr83eL4r7rqWGHubHjoMETZSe+SAAABc0lEQVQokZWR6XKCMBSFE4EABQsoIi6tu5aGKqjFtVbRauvS9v2fpjEBdWz/9M5kTnK+ycmdXADAJsdxnGFwrI76bmwArZzGa0XLymo8zxO1snzy1mCI42WMlqsGlmWE3NVShljOxUhVWwA4ECNcJueKC4sFhoyiWyeSgAitqVFtWBF6S1FJQPhNbEciAVYmQlr5UKXoCwBJ/QRgm83EbyFZitFWbQNwOCMVS3FgBdYuAk+3EEqA6nYPpF22cIUwdKmxVovXCO4+yC2yar8CaYe49meHTtThPnX7D0QC90vyjdJlYIWiBjNA3bpGGNaqR0OS86fmMW4/tVwsY/XReSi3sMoX4ilrmiAI+eOwBYHutDuG7kvJc81ms2TypRRNuTm5ocVkQmQ6aTI0DvVQn+vjha6Hob6Y6vNXfcyQ2e/1e6PnfuD3On7Xszu+3/cYCjzPtoOhZ4/sdNc3lbSiDE2GlEEgimIgmqYYpBWyCYKBQvwf4QQtRo/eO0oAAAAASUVORK5CYII="></button>
<div id="rightdrop02" class="right_content02">
<a href="#">Dropdown01</a>
<a href="#">Dropdown02</a>
<a href="#">Dropdown03</a>
<a href="#">Dropdown04</a>
<a href="#">Dropdown05</a>
<a href="#">Dropdown06</a>
</div>
</div>
</div>
img不是原始的,因为它来自私人站点。剥离了html,这样它就不那么复杂了,但是css是一样的。我也知道我的代码很糟糕,不需要提醒我...
答案 0 :(得分:3)
单击图像时,事件目标是图像,而不是按钮。您必须修复条件才能使其正常工作:
if (!event.target.matches('.rightmenubtn02') &&
!event.target.matches('.rightmenubtn02 img')) {
https://jsfiddle.net/swynmuat/
条件现在不仅检查按钮,而且检查按钮内的图像。