How can I detect specific element is clicked?

Question

Please follow these two steps:

• focus on the input by clicking in it
• and now click on the button

$("input").on({
    focusout: function() {
    	this.value += "one|";
    }
});

$("button").on("click", function(){
  $old_val = $("input").val();
  $("input").val($old_val+"two|");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<button>Add "two"</button>

The result will be: one|two|! Well I don't want this. I want to disable focusout when I click on the button. How can I do that?

Expected result after following those two steps should be two|.

Answer 1

You want to prevent the button from calling the default mousedown event which is where browsers change the focus. Using e.preventDefault() will stop this from happening if you assign it to the mousedown event on the button.

$("input").on({
    focusout: function() {
    	this.value += "one|";
    }
});
$("button").on("mousedown", function(e) {
  e.preventDefault(); 
});
$("button").on("click", function(){
  $old_val = $("input").val();
  $("input").val($old_val+"two|");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<button>Add "two"</button>