How to control click event of
conditionally?

Question

I have a ul tag and several li tags inside that. When I click on a li some action is occurs using Jquery click event. For each li the action is different.

Then I added a text box into each li. When ever I click on the text box to enter something the li click event gets triggerd.

How do I prevent li click event when I am clicking in the text box?

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 click event:

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

https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli Refer This question.. — Vishal, Jun 18 '18 at 06:08
@BrockJames duplicated https://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event — Supun Praneeth, Jun 23 '18 at 09:31

score 4 · Answer 1 · answered Jun 18 '18 at 06:07

maybe you have to try j query method which is e.stopPropagation(); here is a code

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

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

here is a link for more link

score 2 · Answer 2 · edited Mar 20 '20 at 16:57

2

you should use an js event `e.stopPropagation(); ,which might be help you.

edited Mar 20 '20 at 16:57

manan5439

898
9
24

answered Feb 28 '19 at 07:33

code7004

120
1
7

score 1 · Answer 3 · answered Jun 18 '18 at 06:28

I think, It easy like this:

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

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

score 0 · Answer 4 · answered Jun 18 '18 at 06:11

You need to check if the click is coming from input text box or not.

try this:

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


    // my actions    
});

If click is from text box, then rest of the code does not load

score 0 · Answer 5 · answered Jun 18 '18 at 06:13

You can try something like below.

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

score 0 · Answer 6 · edited Jun 23 '18 at 23:32

I have created the same scenario that you seek and then used jQuery to stop the event of the parent on child.

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

Now if you click on text car1, the event is triggered, but on clicking the text box, event does trigger anymore. Hope this will help you.

On clicking the text box, the event will no longer trigger.So the child event will not fire an event any more.

score 0 · Answer 7 · answered Jun 22 '18 at 04:00

You need to check where from the click is coming, use following code :-

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

If click comes from input, then no action is performed

score 0 · Answer 8 · answered Jun 23 '18 at 12:21

Like Alpesh mentioned event.stopPropagation() should be the right way. I am not sure if "click" or "focus" or maybe both need to be stopped but i wanted to mention that there is a way to stop propagation by using css. Propery "pointer-events".

Maybe it works for your case with a textbox.

Checkout

score -2 · Answer 9 · answered Jun 18 '18 at 06:10

-2

You can use Event.target in your handler to tell which element triggered the event.

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

answered Jun 18 '18 at 06:10

cfillion

1,340
11
16

Cfillion Have you read the query what he is facing? He want proper answer not alternate solution. – Narendra Solanki Jun 18 '18 at 06:13
@NarendraSolanki Do you mean I should have added the actual check to test whether `evt.target` is the input to the code example? – cfillion Jun 18 '18 at 06:17
Yes exactly Cfillion – Narendra Solanki Jun 18 '18 at 06:23
Ah ok. I thought it was a good idea to just point in the right direction and let the reader do the last finishing touch (instead of 100% spoon-feeding the answer). I'll write more complete examples next time. – cfillion Jun 18 '18 at 06:25

How to control click event of conditionally?

9 Answers9

How to control click event of
conditionally?