Javascript 图像不会触发脚本

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

单击下拉按钮，将调用dropItems（），其中显示列表项：

函数dropItems（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'）| |！event.target.matches（'#dropdowncon'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

这不起作用，因为按钮中不允许使用图像。以下是您的问题的可能解决方案：

这不起作用，因为按钮中不允许使用图像。这里有一个可能的解决方案：

首先，按钮中有一个

onclick

，以及嵌套的image元素，它们都调用相同的函数，并且由于该函数中有一个

切换

，第二次调用可能会反转第一次调用的切换

其次，首先不要使用内联HTML事件属性（为什么）

但是，真正的问题是按钮内部嵌套图像的分层，这可能会阻止按钮成为事件目标解决方案是根本不使用

按钮

，只需将图像样式设置为

按钮

，并将其编码为按钮。

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

//获取我们需要的HTML元素的引用：
var dd=document.getElementById（“myDropdown”）；
var img=document.querySelector（“img”）；
//为映像设置单击事件处理程序：
img.addEventListener（“单击”，删除项）；
//设置窗口的单击事件处理程序
window.addEventListener（“单击”），函数（evt）{
//如果单击了除图像以外的任何内容。。。，
如果（evt.target！==img）{
//隐藏列表
dd.classList.add（“隐藏”）；
}
});
函数dropItems（）{
dd.classList.toggle（“隐藏”）；
}

/*默认情况下，这将应用于列表*/
.hide{display:none；}
/*设置图像样式，使其看起来像按钮：*/
img{
显示：内联块；
填充物：5px；
背景色：#E0；；
边框：1px实心#808080；
盒影：1px 1px 1px#a0a0；
高度：25px；
}
/*在单击图像以使其显示时更改样式
看起来像是一个按钮被点击了*/
img：活动{
盒影：-1px-1px 1px#606060；
}

---

首先，按钮中有一个

onclick

，还有嵌套的image元素，它们都调用相同的函数，并且由于该函数中有一个

切换

，第二次调用可能会反转第一次调用的切换

其次，首先不要使用内联HTML事件属性（为什么）

但是，真正的问题是按钮内部嵌套图像的分层，这可能会阻止按钮成为事件目标解决方案是根本不使用

按钮

，只需将图像样式设置为

按钮

，并将其编码为按钮。

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

//获取我们需要的HTML元素的引用：
var dd=document.getElementById（“myDropdown”）；
var img=document.querySelector（“img”）；
//为映像设置单击事件处理程序：
img.addEventListener（“单击”，删除项）；
//设置窗口的单击事件处理程序
window.addEventListener（“单击”），函数（evt）{
//如果单击了除图像以外的任何内容。。。，
如果（evt.target！==img）{
//隐藏列表
dd.classList.add（“隐藏”）；
}
});
函数dropItems（）{
dd.classList.toggle（“隐藏”）；
}

/*默认情况下，这将应用于列表*/
.hide{display:none；}
/*设置图像样式，使其看起来像按钮：*/
img{
显示：内联块；
填充物：5px；
背景色：#E0；；
边框：1px实心#808080；
盒影：1px 1px 1px#a0a0；
高度：25px；
}
/*在单击图像以使其显示时更改样式
看起来像是一个按钮被点击了*/
img：活动{
盒影：-1px-1px 1px#606060；
}

包括CSS，我建议在StackOverflow中使用插入代码工具。他们正在制作一个工作示例，以便有人可以帮助您。包括CSS，我建议在StackOverflow中使用插入代码工具。他们正在制作一个工作示例，以便有人可以帮助您。这不是交易，即使图像在按钮外，它仍然没有任何作用。当然，图像被允许作为

按钮
元素的子元素。从“
元素比元素更容易设置样式。您可以添加内部HTML内容（考虑
，
甚至
），使用
:after
和
:before
伪元素来实现复杂的渲染，而
只接受文本值属性。”是的，你是对的。我之所以这么说是因为我以前在按钮中的图像有问题。这不是交易，即使图像在按钮外，它仍然不起作用。当然，图像被允许作为
按钮
元素的子元素。从“
元素比元素更容易设置样式。您可以添加内部HTML内容（想想
，
甚至