Question

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

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

＆＃13;

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

＆＃13;

    <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>

＆＃13;

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

问题在于，当我点击图片时，没有任何反应。

Answer 1

首先，按钮中有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>

Answer 2

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

图像不会触发脚本

2 个答案: