Question

您好我在我制作的列表上使用了可折叠的树。它使用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>

提前感谢您的帮助。

Answer 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();
        }
    });
});

Answer 2

您只需在跨度中添加一个阻止传播的点击功能即可。说明：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>

Answer 3

您可以做的一件事是为span添加点击处理程序，并停止传播。因此，当有人点击span时，该事件不会传播到包含li的内容：

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

Answer 4

可以尝试

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

jQuery .on（“click”）事件，异常

4 个答案: