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进行事件委托的最佳方法是将选择器字符串作为事件类型之后的第二个参数传递给.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>

Answer 2

固定！

因为我忘了提及，弹出＆＃39;弹出后＆＃39; div开放，他们还需要能够被点击以关闭＆＃39;或者回到隐形。

我从HMTL中删除了onclick="fadeToggle()"，并且由于@uselesscode修复了Javascript。这些都是我需要与之交互的DIV，并且由于这些DIVS 在表之外，因此使用表ID无效。这样做了：

$(document).on('click', 'div', function(e) {

最终代码：

$(document).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 '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;
    case 'send_a_message_div':
            $("#send_a_message_div").fadeOut(300);
            $("#overlay_background").fadeOut(500);
            console.log('at the end of send_a_message_div statement, case 2');
    break;
    case 'appointments_tile_div':
            //console.log('in if step, case 2');
            $('#appointments_div').addClass('popup_menu').removeClass('make_invisible');
            $("#overlay_background").fadeIn(300);
            $("#appointments_div").fadeIn(500);
            e.stopPropagation(); 
            return false;
    break;  
    case 'appointments_div':
            $("#appointments_div").fadeOut(300);
            $("#overlay_background").fadeOut(500);
    break;
    default: 
        //console.log('in the default code and target is ' + e.target.id);
        $('#send_a_message_div').css({ display: "none" });
        $('#appointments_div').css({ display: "none" });
        $('#send_a_request_div').css({ display: "none" });
        $('#overlay_background').css({ display: "none" });
}
});

这是HMTL：

<div class="Div_icons" align="center">
    <div id="overlay_background"></div>
        <div id="appointments_div" class="make_invisible">

        <span style="text-align:center"><b><h1>Appointments</h1></b>
            <span></span>

            <br>
            <ul class="popup_menu_ul">

                <li>
                    <a href="https://website.com/schedule-an-appointment/default.aspx">Schedule Appointment</a>
                    <a></a>
                </li>

                <li>
                    <a href="https://website.com/cancel-an-appointment/default.aspx">Reschedule Appointment</a>Cancel Appointment</a>
                    <a></a>
                </li>

                <li>
                    <a href="https://website.com/request-an-appointment/default.aspx">Reschedule Appointment</a>
                    <a></a>
                </li>
            </ul>
        </span>
    </div>
        <div>
        <table id="img_icons_table" class="">
            <tbody>
                <tr>
                    <td>
                        <div id="send_a_message_tile_div">
                            <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>
                    <td>
                        <div id="appointments_tile_div">
                            <img src="calendar-icon-white.png" alt="Appointments" title="Appointments" width="120" height="120">
                            <span>Appointments</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

是的，我发现这很笨重而且不是最佳的，不幸的是我在WYSIWYG html编辑器的源页面内工作。

Answer 3

如果点击事件也与图像有关？

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

3 个答案: