为什么带有 onclick 的按钮内的 img 不触发脚本？

Question

我有一个带有 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>

该图片不是原始图片，因为它来自私人网站。剥离了 html，使其不那么复杂，但 css 是相同的。我也知道我的代码很糟糕，不需要提醒我...

Answer 1

单击图像时，事件目标是图像，而不是按钮。您必须修复条件才能使其正常工作：

if (!event.target.matches('.rightmenubtn02') && 
    !event.target.matches('.rightmenubtn02 img')) {

https://jsfiddle.net/swynmuat/

该条件现在不仅检查按钮，还检查按钮内的图像。

Answer 2

上面的答案会因为冒泡而触发 onClick 两次，并且只部分正确。 您需要调用

event.stopPropagation()

才能正常工作。因此，当单击 img 时，它不会冒泡到 onClick 按钮。