javascript - 如何为 div 中的子图像元素触发 onClick 事件

Question

我有一个带有子图像的 div 的 td。 CSS 以该 div 为目标，onclick 事件位于 div 上，该事件触发一些 jquery 以创建一个弹出窗口，其后有一个覆盖 div。

问题:我可以点击 div 中的任何区域并触发 onClick 事件，但当我点击 div 内的图像时除外。

代码如下:

<td>
<div id="send_a_message_tile_div" onclick="fadeToggle()">
<img src="dr-icon-white.png" alt="Send A Message" title="Send A Message" 
width="120" height="120">
<span>Send A Message</span>
</div>
</td>

这是 jQuery:

var fadeToggle = (function() {
$(document).on("click",function (e) {
switch(e.target.id) {
    case 'send_a_message_tile_div':   $('#send_a_message_div').addClass('popup_menu').removeClass('make_invisible');
            $("#overlay_background").fadeIn(300);
            $("#send_a_message_div").fadeIn(500);
            //e.stopPropagation(); 
            return false;
    break;

我需要添加类似 e.ContineuePropagation() 的东西吗？哈哈

这是 CSS:

#img_icons_table td div{
    font-family: 'Ubuntu', sans-serif;
    text-align:center;
    position: relative;
    width:170px;
    height:155px;
    margin:5px 5px 30px 5px;
    border-radius: 5px;
    padding:5px;
    padding-top: 15px;
    box-shadow: 1px 1px 8px gray;
    background: #31b44b;
    transition: 0.1s all ease;
    cursor:pointer;
}
#img_icons_table td div:hover{
    font-family: 'Ubuntu', sans-serif;
    background:#448e40;
    box-shadow: 5px 10px 10px #aaaaaa;
}  
#img_icons_table td div img{
    font-family: 'Ubuntu', sans-serif;
    position: relative; 
    border-radius: 6px;
     opacity: 0.85; 
    filter: alpha(opacity=85); /* For IE8 and earlier */
} 

我什至尝试过只在图像上附加 onClick 事件，但它仍然只在单击图像外部但在 div 内部时触发...？

见下图:

Before onclick event

After onClick event is fired

如何使用 onClick 使 div 中的图像也在单击图像时触发 onClick 事件？

非常感谢任何帮助!

Answer 1

问题是 e.target将永远是被点击的东西，所以即使点击图片后事件冒泡，e.target将保留对调用的每个处理程序的图像的引用，而不是当前元素。此外，传播和冒泡只涉及您的事件附加到的元素或其祖先上的其他 事件处理程序。事件不会针对具有事件的元素和被单击的后代之间的每个元素触发。该事件只会在每次点击时触发一次。

您似乎在尝试使用 event delegation .你可以使用 .closest() 找到你正在寻找的元素，但幸运的是 jQuery 提供了一种更简单的方法来做到这一点。使用 jQuery 进行事件委托(delegate)的最佳方法是将选择器字符串传递给 .on。作为事件类型之后的第二个参数。执行此操作时，与选择器匹配的被单击事物的第一个祖先将触发事件处理程序并分配给 this。 .然后你可以测试 this.id而不是 e.target.id .

此外，不是将事件处理程序附加到 document ，最好将它附加到您所定位的所有元素的最近共同祖先，在这种情况下，它可能是它们都包含在其中的表。同样，不是内联点击处理程序然后附加处理程序，只是附加处理程序开始。

// Attach to the #actions table
// targeting the divs
$('#actions').on('click', 'div', function(e) {
  // since we passed a 'div' selector to .on,
  // this will be an element that matches that selector
  switch (this.id) {
    case 'inbox_div':
      alert('Inbox clicked');
      e.stopPropagation();
      break;
    case 'send_a_message_tile_div':
      alert('Send A Message clicked');
      e.stopPropagation();
      break;
  }
});

#actions div {
  border: 1px solid #090;
  background: #090;
  border-radius: 7px;
  padding: 1em;
  margin: 1em;
}

#actions span {
  display: block;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="actions">
<tr>
  <td>
  <div id="inbox_div">
    <img src="http://via.placeholder.com/150x150" alt="Send A Message" title="Send A Message" width="120" height="120">
    <span>Inbox</span>
  </div>
  </td>
  <td>
  <div id="send_a_message_tile_div">
    <img src="http://via.placeholder.com/150x150" alt="Send A Message" title="Send A Message" width="120" height="120">
    <span>Send A Message</span>
  </div>
  </td>
 </tr>
 </table>

我在这里使用 'div'作为选择器来过滤掉我们想要将此事件定位到的元素。如果你不能使用 'div' ，例如，如果有可能 <div> s 本身可以包含 <div> s，您可以改为向要定位的元素添加一个类，然后将该类用作选择器:

$('#actions').on('click', '.event-target', function(e) {
  switch (this.id) {
    case 'inbox_div':
      alert('Inbox clicked');
      e.stopPropagation();
      break;
    case 'send_a_message_tile_div':
      alert('Send A Message clicked');
      e.stopPropagation();
      break;
  }
});

#actions div {
  border: 1px solid #090;
  background: #090;
  border-radius: 7px;
  padding: 1em;
  margin: 1em;
}

#actions span {
  display: block;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="actions">
<tr>
  <td>
  <div id="inbox_div" class="event-target">
    <img src="http://via.placeholder.com/150x150" alt="Send A Message" title="Send A Message" width="120" height="120">
    <span>Inbox</span>
  </div>
  </td>
  <td>
  <div id="send_a_message_tile_div" class="event-target">
    <img src="http://via.placeholder.com/150x150" alt="Send A Message" title="Send A Message" width="120" height="120">
    <span>Send A Message</span>
  </div>
  </td>
 </tr>
 </table>