jQuery .on("click") 事件异常答案

【问题标题】：jQuery .on("click") event with exceptionjQuery .on("click") 事件异常
【发布时间】：2017-10-17 08:33:19
【问题描述】：

您好，我在制作的列表中使用了可折叠树。它使用 jQuery 在单击时折叠树，旁边有一个编辑按钮。

我想要做的：我想使用一个选择器来从点击功能中删除编辑范围，这样当我点击编辑时什么都不会发生，但是当我点击树时会崩溃。

我希望它类似于：$('.hotelsholder').on("click", "ul>li:not(span)", function (e)，但这不起作用。

这是我的代码：

$(document).ready(function(){
  $('.hotelsholder').on("click", "ul>li", function (e) {
    e.stopPropagation();
    $(this).toggleClass('changed');
    console.log(this);
    if ($(this).find("ul").first().css("display") === "none") {
      console.log('this' + $(this).find("ul").first().css("display"))
      $(this).children(":nth-child(2)").slideDown();
    } else {
      $(this).find("ul").slideUp();
    }
  });
});

.hotelsholder>ul>li {
  cursor: pointer;
}

.editHotel {
  color: blue;
  margin-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hotelsholder">  
  <ul>
    <li class="">
      first level
      <span class="editHotel">edit</span>
      <ul style="display: block;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
  </ul>
</div>

提前感谢您的帮助。

【问题讨论】：

如何在隐藏的 htmlElement 中进行点击？
function(e) 有一个目标（点击）只要询问这个目标是否是一个跨度，检查 console.log(e.target)
@ÁlvaroTouzón 我不明白你的意思，你能把你的问题说得更清楚吗？
@Roy 我已经尝试过
上的函数，它里面有一个。

【解决方案1】：

正如 Roy 在他的评论中所说，您可以检查目标是否是这样的跨度： https://jsfiddle.net/o1cmb72d/

$(document).ready(function(){
    $('.hotelsholder').on("click", "ul>li", function (e) {
    if ($(e.target).hasClass('editHotel'))
    {
        return false;
    }
    console.log(e.target);
        e.stopPropagation();
        $(this).toggleClass('changed');
        console.log(this);
        if ($(this).find("ul").first().css("display") === "none") {
            console.log('this' + $(this).find("ul").first().css("display"))
            $(this).children(":nth-child(2)").slideDown();
        }
        else {
            $(this).find("ul").slideUp();
        }
    });
});

【讨论】：

不这么认为，感谢您的澄清。

【解决方案2】：

你可以在你的 span 中添加一个点击函数来防止传播。解释：span 是li 的一部分，因此当您单击跨度时，您也会单击li。用 stopPropagation 附加它自己的函数可以防止它触发另一个函数

$(document).ready(function(){
        $('.hotelsholder').on("click", "ul>li", function (e) {
            e.stopPropagation();
            $(this).toggleClass('changed');
            console.log(this);
            if ($(this).find("ul").first().css("display") === "none") {
                console.log('this' + $(this).find("ul").first().css("display"))
                $(this).children(":nth-child(2)").slideDown();
            }
            else {
                $(this).find("ul").slideUp();
            }
        });
        $('.editHotel').on("click", function (e) {
             e.stopPropagation();
             console.log('edit link clicked');
        });
    });

.hotelsholder>ul>li{cursor:pointer;}
.editHotel{color:blue; margin-left:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hotelsholder">  
  <ul>
    <li class="">
      first level
      <span class="editHotel">edit</span>
      <ul style="display: block;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

可以试试

$('.hotelsholder').on("click", ".editHotel", function (e) {
        e.stopPropagation()
    });

【讨论】：

【解决方案4】：

您可以做的一件事是为span 添加一个点击处理程序，然后停止传播。所以当有人点击span时，事件不会传播到包含li：

$('.hotelsholder').on("click", "ul>li>span", function (e) {
    e.stopPropagation();
});

【讨论】：