图片不触发脚本答案

【问题标题】：Image does not trigger script图片不触发脚本
【发布时间】：2018-03-04 01:22:10
【问题描述】：

我有一个简单的下拉按钮，里面有图片：

通过单击下拉按钮，调用 dropItems()，显示列表项：

    function dropItems() {
            document.getElementById("myDropdown").classList.toggle("show");
        }
        window.onclick = function(event) {
        if (!event.target.matches('.dropbtn') || !event.target.matches('#dropdownicon')) {

            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');
                    }
                }
            }
        }

    <div class="dropdown">
                <button onclick="dropItems()" class="dropbtn"><img id="dropdownicon" src="img/dropdown.png" height="25" onclick="dropItems()"></button>
                <div id="myDropdown" class="dropdown-content">
                    <a href="#">Item 1</a>
                    <a href="#">Item 2</a>
                    <a href="#">Item 3</a>
                </div>
            </div>

如您所见，我还在按钮内的图像上应用了 onclick 事件，因为当您直接单击图像时它会阻止按钮的 onclick。

问题是当我点击图片时，什么也没有发生。

【问题讨论】：

包括 CSS，我推荐使用 StackOverflow 中的插入代码工具。他们制作了一个可行的示例，以便有人可以帮助您。

标签： javascript html

【解决方案1】：

这不起作用，因为按钮中不允许使用图像。这是您的问题的可能解决方案：https://stackoverflow.com/a/8683553/1751277

【讨论】：

这不是交易，即使图像在按钮之外，它仍然什么都不做
当然图片可以作为button元素的子元素。
From MDN "<button> 元素比元素更容易设置样式。您可以添加内部 HTML 内容（想想<em>、<strong> 甚至<img>），并利用:after和:before伪元素实现复杂的渲染，而<input>只接受文本值属性。”
是的，你是对的。我之所以这样做，是因为过去我在按钮中的图像有问题。

【解决方案2】：

首先，按钮中有一个onclick 以及嵌套的图像元素，它们都调用相同的函数，并且由于该函数中有一个toggle，第二次调用可能会反转切换第一次通话。

其次，首先不要使用内联 HTML 事件属性（here's a long list of reasons 为什么）。

但是，真正的问题是按钮内部嵌套图像的分层，这会阻碍按钮成为事件目标。 解决方案是根本不使用button，而只是将图像设置为看起来像button，并将其编码为按钮。

最后，如果你只是简单地在下拉列表中设置一个最初隐藏列表的类，代码会变得简单得多：

// Get references to the HTML elements we will need:
var dd = document.getElementById("myDropdown");
var img = document.querySelector("img");

// Set up the click event handler for the image:
img.addEventListener("click", dropItems);

// Set up the click event handler for the window
window.addEventListener("click", function(evt){
  // If anything except the image was clicked...,
  if(evt.target !== img){
    // Hide the list
    dd.classList.add("hide");
  }
});

function dropItems() {
  dd.classList.toggle("hide");
}

/* This will be applied to the list by default */
.hide { display:none; }

/* Style the image to make it look like a button: */
img { 
  display:inline-block;
  padding:5px;
  background-color:#e0e0e0;;
  border:1px solid #808080;
  box-shadow:1px 1px 1px #a0a0a0;
  height:25px;
}

/* Change the style when the image is clicked to make it 
   look like it's a button being clicked. */
img:active {
    box-shadow:-1px -1px 1px #606060;
}

<div class="dropdown">
  <!-- Don't use HTML to style elements. That's CSS's job. -->
  <img id="dropdownicon" class="dropbtn"
       src="https://i.pinimg.com/736x/1d/3b/8e/1d3b8e3c20793a25a32de080956cb41a--emoji-faces-smiley-faces.jpg">

  <!-- Note that the list has the "hide" class applied by default -->
  <div id="myDropdown" class="dropdown-content hide">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
  </div>
</div>

【讨论】：