Question

编辑： 问题与事件传播无关，如果您想知道如何在jQuery中停止传播，请使用event.stopPropagation(); 的

当用户将他/她的鼠标移到元素上时，我的jQuery代码会将<img>附加到此元素中，当他将鼠标移出而不是附加的元素被删除。它可以帮助人们在单击附加的<img>元素时编辑字段。

我使用append()方法将<img>添加到的原因是因为当用户将鼠标移到附加{{1}时，我希望保持<img>元素可见元素（<img>正在成为<img>的子元素但它没有发生，当用户将鼠标移到它上面时被删除。我认为这是因为事件传播，但我找不到如何在jQuery中激活它，就像在基于Firefox的浏览器中使用<img>一样。

以下是代码：

JQuery代码：

addEventListener

简单HTML：

$(document).ready(function() { $('.EditEnabled').bind("mouseover", ShowEditFields); $(".EditEnabled").bind("mouseout", HideEditFields); }); function ShowEditFields(event) { $(event.target).append(" <img id='editImg' src='images/edit.png' style='margin-bottom:-3px'/>"); } function HideEditFields(event) { $(event.target).children("#editImg").remove(); }

你能解释我如何解决它。

谢谢。

Answer 1

首先，我会避免尽可能多的DOM操作。理想的情况是构建这样的标记：

<span class="editEnabled">Some data<img ...></span>

使用CSS：

span.editEnabled img { display: none; }
span.editEnabled img.visible { display: inline; }

和Javascript：

$(function() {
  $("span.editEnabled").hover(function() {
    $(this).children("img").addClass("visible");
  }, function() {
    $(this).children("img").removeClass("visible");
  });
});

那几乎应该这样做。

我会避免使用jQuery效果，因为使事物可见将使它们成为块级元素，而不是像你想要的那样内联。

Answer 2

您想要使用jQuery mouseenter和mouseleave事件，而不是mousover和mouseout。原因是当您将鼠标移到mouseout上时，img将会触发。

值得庆幸的是，jQuery将其组合成hover方法：

$(document).ready(function() {
     $('.EditEnabled').hover(ShowEditFields, HideEditFields);
});

然而我同意另一个答案，你应该使用CSS来操作DOM。我只想使用:hover伪选择器，然后为IE6添加特殊支持。

<强> CSS

span.EditEnabled img { display: none }
span.EditEnabled:hover img,
span.EditEnabled.hover img { display: block }

确保您的HTML中包含img，这就是大多数浏览器和IE7 +

所需的全部内容

支持IE6添加：

<!--[if lte IE 6]>
<script type="text/javascript">
$(function(){
  $(".EditEnabled").hover(
    function(){ $(this).addClass('hover') },
    function(){ $(this).removeClass('hover')}
  );
});
</script>
<![endif]-->

Answer 3

我实际上找到了另一个答案，我正在寻找的方式。这可能不是最佳做法，但至少我已经找到了如何解决这个问题。

$(document).ready(function() {
    //    $('.EditEnabled').bind("mouseenter", ShowEditFields);
    //    $(".EditEnabled").bind("mouseleave", HideEditFields);
    $(".EditEnabled").hover(ShowEditFields, HideEditFields);
});

function ShowEditFields(event) {
    var target = $(event.target);
    if (target.is(":has(#editImg)") == false)
        target.append(" <img id='editImg' src='images/edit.png' style='margin-bottom:-3px;display:inline'></img>");
}

function HideEditFields(event) {
    //    event.stopPropagation();
    //    if ($(event.relatedTarget).is("#editImg") == false)
    $(event.target).children("#editImg").remove();
}

将事件处理程序应用于子元素（jQuery中的事件传播）

3 个答案: