How to stop event in javascript?

Question

consider following,

<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="txt1" />
            <input type="button" id="btn1" value="Submit"/>            
        </div>
    </form>
    <script>         
        $("#txt1").live("blur", function () {
            console.log('blur');            
            return false;
        });

        $("#btn1").live("click", function () {
            console.log('click');
            return false;
        });
    </script>
</body>

Above code will log blur event and click event on trigger of respective events. If click or change something in text box and then click on button btn1 blur and click event will happen respectively.What i want is if blur event is happening because of btn1 then click event should not happen,it should log only blur event,I want to stop click event from happening. How to do this? Can anyone help?

see my (@user2727841) answer and link... If it fulfil your requirement then vote it for others for reference.... — user2727841, Feb 04 '14 at 13:25

user2727841 · Answer 1 · 2014-02-04T13:30:12.557

1

try this

<form id="form1" runat="server">
   <div>
      <input type="text" id="txt1" />
      <input type="button" id="btn1" value="Submit"/>            
   </div>
</form>

javascript code

$("#txt1").on("blur", function (event) {
   event.preventDefault();
   alert('blur');            
   return false;
});
$("#btn1").on("click", function (event) {
   event.preventDefault();
   alert('click');
   return false;
});

also test it here and remember live keyword is deprectaed from jquery 1.9 use on instead of live in jquery 1.9 or greater.

edited Feb 04 '14 at 13:30

answered Feb 04 '14 at 13:24

user2727841

715
6
21

Thanxx,this works,but due to some compatibility issues I can't use 'on' function.So I can't refer to event. – Yogesh Feb 04 '14 at 13:31
And it's not working with console.log. – Yogesh Feb 04 '14 at 13:40
its working with console and for that you've see it in console. – user2727841 Feb 05 '14 at 03:18

score 0 · Answer 2 · answered Feb 04 '14 at 13:23

You cannot "stop" an other/foreign event like so. Event.preventDefault() and/or Event.stopPropagation() (which both will get triggered when returning false from within a jQuery event handler), will allow you to stop and prevent the exact same event from further processing on parent nodes.

In your instance, you need your own logic. Use some variables and set them properly and check the value where necessary. For instance, on click you set FOOBAR = true and in blur you check if( FOOBAR ) and act on that.

Rahul Kumar · Answer 3 · 2014-02-04T13:56:47.103

0

You need to destroy one event see the demo

Hope this helps you.

jsfiddle.net/rkumar670/5a86V

edited Feb 04 '14 at 13:56

answered Feb 04 '14 at 13:38

Rahul Kumar

528
1
3
19

I think your page has been removed. – Yogesh Feb 04 '14 at 13:44
Try this http://jsfiddle.net/rkumar670/5a86V/ – Rahul Kumar Feb 04 '14 at 13:55
Rahul,thanks for your response,but it will destroy click event permanently,and I don't want that. – Yogesh Feb 05 '14 at 05:43

Chi Row · Accepted Answer · 2014-02-04T13:54:42.673

Here is one way to solve it by adding a timeout.

var inFocus = false;

$("#txt1").focus(function () {
    inFocus = true;
    $("#log").prepend("<p>focus</p>");

});
$("#txt1").blur(function () {
    setTimeout(function(){inFocus = false;},200);
    $("#log").prepend("<p>blur</p>");
});
$("#btn1").click(function () {
    if (!inFocus) {
        $("#log").prepend("<p>click</p>");
    }
});

In the fiddle example, I put the log out to the window.

How to stop event in javascript?

4 Answers4