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

时间:2018-06-18 06:02:17

标签: jquery html

我有一个 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    
});

9 个答案:

答案 0 :(得分:4)

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

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

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

这是一个更多link

的链接

答案 1 :(得分:2)

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

答案 2 :(得分:1)

我想,这很容易:

&#13;
&#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;
&#13;
&#13;

答案 3 :(得分:0)

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

试试这个:

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


    // my actions    
});

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

答案 4 :(得分:0)

您可以尝试以下内容。

$(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>

答案 5 :(得分:0)

我创建了你寻找的相同场景,然后使用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,则会触发事件,但单击文本框时,事件会再次触发。 希望这会对你有帮助。enter image description here

单击文本框时,事件将不再触发。因此子事件不再触发事件。 enter image description here

答案 6 :(得分:0)

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

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

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

答案 7 :(得分:0)

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

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

Checkout

答案 8 :(得分:-2)

您可以在处理程序中使用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>