Question

我有一个 ul 标记和几个 li 标记。当我点击 li 时，使用J 查询点击事件会发生一些操作。对于每个 li ，操作都不同。

然后我在每个 li 中添加了一个文本框。当我点击文本框输入 li 点击事件被触发时。

如何在文本框中点击时阻止 li 点击事件？

HTML code：

<ul id="myul">
    <li id="myli">

        <div>
            // some codes

            <span> 
                // some codes
            </span>

            <input type="text" id="myTextbox" />

            // some codes                                                         
        </div>
    </li>

    // other li tags
</ul>

JQuery点击事件：

$('body').on('click', '.myli', function (evt) 
        // my actions    
});

Answer 1

也许你必须尝试j查询方法，e.stopPropagation();这里是一个代码

event.stopPropagation（）方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

 $("input").click(function(e) {
    e.stopPropagation();
  });
});

这是一个更多link

的链接

Answer 2

ypu应该使用e.stopPropagation();，这可能会对您有所帮助

Answer 3

我想，这很容易：

＆＃13;

$('body').on('click', '.myli', function (evt){
 console.log('.myli')
 });
 $("#myTextbox").click(function (e) {
 e.stopPropagation();
 console.log("myTextbox");
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myul">
    <li id="myli" class="myli">
        <div>
            <span>
            </span>
            <input type="text" id="myTextbox" />
        </div>
    </li>
</ul>

＆＃13;

Answer 4

您需要检查点击是否来自输入文本框。

试试这个：

$('body').on('click', '.myli', function (evt) 
    // hear check if textbox
    if (evt.target.id == "myTextbox") {
         return; 
    }


    // my actions    
});

如果单击来自文本框，则其余代码不会加载

Answer 5

您可以尝试以下内容。

$(document).ready(function(){
	$("#myul li").click(function(e){
		if($(e.target).attr("type") != "text"){
			alert("Li is clicked");
		}
	});
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myul">
    <li id="myli" style="background-color:#efefef;">
		<div>
      some codes1<br/>

        <span> 
             some codes 2 <br/>
        </span>



		<input type="text" id="myTextbox" />  <br/>

                 some codes 3  <br/>
            </div>
    </li>

    
</ul>

Answer 6

我创建了你寻找的相同场景，然后使用jQuery来停止子节点上父节目的事件。

$(document).ready(function() {
  $('cars').on('click', '.car1', function() {
    alert('Li clicked');
  });

  $(".car1 input").click(function(e) {
    e.stopPropagation();
  });
});

<html>

<head>
  <title>JQuery Issue with propagation</title>
</head>

<body>
  <ul class="cars">
    <li class="car1">
      <input type="text" placeholder="click me">
    </li>

    <li class="car2">
      car2
    </li>

    <li class="car3">
      car3
    </li>
  </ul>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>

</body>

</html>

现在，如果单击文本car1，则会触发事件，但单击文本框时，事件会再次触发。希望这会对你有帮助。

单击文本框时，事件将不再触发。因此子事件不再触发事件。

Answer 7

您需要检查点击的位置，使用以下代码：-

$('body').on('click', '#myli', function (e) {
    if (e.target.nodeName == 'input') {
        return;
    }
    // Your Action    
});

如果点击来自输入，则不会执行任何操作

Answer 8

像Alpesh提到的event.stopPropagation（）应该是正确的方法。我不确定是否需要停止“单击”或“焦点”，或者两者都需要停止，但是我想提一下，有一种方法可以通过使用CSS停止传播。适当的“指针事件”。

也许它适用于带有文本框的案例。

Checkout

Answer 9

您可以在处理程序中使用Event.target来判断哪个元素触发了事件。

$('#myli').click(function(evt) {
  console.log(evt.target);
});

<ul>
  <li id="myli">
    <span>Click me</span>
    <input placeholder="Click me"/>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何有条件地控制<li>的点击事件？

9 个答案: