消除嵌入式表情况下的鼠标悬停事件问题 [英] Removing mouseover event issue in case of embedded tables

问题描述

此小提琴 我的目标是在用户将鼠标悬停在桌子上方时显示叉号.问题在于，鼠标悬停事件的行为非常奇怪，并且为所有孩子触发了该行为.这是我的上一个问题的后续文章，在这里我试图更具体地说明此案.

Best described as example in this Fiddle My goal is to show the crosses when the user hovers above the tables. The problem is that the mouse-over event behavior is very strange, and it is fired for all of the children. This is the follow-on to my previous question, and here I tried to be more specific about the case.

有什么想法吗?

$(function() {
    $(document).on('mouseover', 'table tbody tr', function (e) {  change_editor_icon_visibility($(this), true)});
    $(document).on('mouseout', 'table tbody tr', function (e) {  change_editor_icon_visibility($(this), false)});
});


function change_editor_icon_visibility(row_obj, mode)
{
    var elem = row_obj.find('tr:hover').length ?       
    row_obj.find('tr:hover:last') : row_obj;
        elem.find('td span.zeon-edit-pencil').toggle(mode);
}

推荐答案

使用:first伪选择器

:first Selector 选择第一个匹配项DOM元素.

:first Selector Selects the first matched DOM element.

$(function() {
  $(document).on('mouseover', 'tr', function(e) {
    e.stopPropagation();
    change_editor_icon_visibility($(this), true)
  });
  $(document).on('mouseout', 'tr', function(e) {
    e.stopPropagation();
    change_editor_icon_visibility($(this), false)
  });
});


function change_editor_icon_visibility(row_obj, mode) {
  row_obj.find('td span.zeon-edit-pencil:first').toggle(mode);
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
  .zeon-remove-sign {
    display: none;
  }
</style>

<table>
  <tbody>
    <tr id='1'>
      <td><span class='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span>AAAAAAA
        <table>
          <tbody>
            <tr id='2'>
              <td>
                <span class='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span>
              </td>
              <td>BBBBBBBBBBB</td>
            </tr>
            <tr id='3'>
              <td>
                <span class='glyphicon glyphicon-remove zeon-edit-pencil zeon-remove-sign'></span>
              </td>
              <td>CCCCCCCCCCC</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

这篇关于消除嵌入式表情况下的鼠标悬停事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！