如何控制点击事件有条件的？

Question

我有一个ul标签和里面的几个li标签。当我点击li时，使用Jquery click事件会发生一些操作。对于每个li，行动是不同的。

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

单击文本框时如何防止li click事件？

HTML代码：

<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

2
投票

你应该使用qazxsw poi，它可能对你有帮助

Answer 3

我想，这很容易：

e.stopPropagation();

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

Answer 4

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

试试这个：

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

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

Answer 5

你可以试试下面的东西。

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


    // my actions    
});

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

Answer 6

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

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

像$('body').on('click', '#myli', function (e) { if (e.target.nodeName == 'input') { return; } // Your Action });提到的event.stopPropagation（）应该是正确的方法。我不确定是否“点击”或“焦点”或者两者都需要停止，但我想提一下，有一种方法可以通过使用css来阻止传播。适当的“指针事件”。

也许它适用于带有文本框的情况。

Alpesh

Answer 8

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

Checkout

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

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

现在，如果单击文本car1，则会触发事件，但单击文本框时，事件将再次触发。希望这会对你有帮助.<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>

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

Answer 9

您可以在处理程序中使用来判断触发事件的元素。

Event.target

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

如何控制点击事件有条件的？

问题描述投票：2回答：9

9个回答

最新问题

如何控制点击事件 有条件的？

问题描述 投票：2回答：9

9个回答

最新问题

如何控制点击事件有条件的？

问题描述投票：2回答：9