Develop Reference

Double-click prevention on save

I have a kendo grid with its dataSource, the grid has an editor dialogue with save button. I need to prevent the save button being double clicked. The onsave functions fire when the save button is clicked. I have a requestEnd event that fires when the save is to be re-enabled.
The problem: onSave1 looks to fail 1 time in 100 . It's based on adding an additional click handler, invoking preventDefault(). Is it fundamentally flawed?
Is onSave2 any better?
onSave1: function (e) {
$(event.srcElement)
.addClass("k-state-disabled")
.bind("click", disable = function (e) { e.preventDefault(); return false; })
this.dataSource.one("requestEnd", function () {
$("[data-role=window] .k-grid-update")
.off("click", disable)
.removeClass("k-state-disabled");
})
}
onSave2: function (e) {
$(event.srcElement)
.removeClass(".k-grid-update")
.addClass("k-state-disabled")
.addClass("disabledMarker");
this.dataSource.one("requestEnd", function () {
$("[data-role=window] .disabledMarker")
.addClass(".k-grid-update")
.removeClass("k-state-disabled")
.removeClass("disabledMarker");
})
}

First Jquery bind has been deprecated since version 3.0 so I would recommend not using it anymore. http://api.jquery.com/bind/
You do not need an onClick event or in your case bind because onSave is already being called during the click. So simply disable the button onSave. Second you should use complete or whatever kendo grid uses for when the save event is finished instead or requestEnd. Code listed below.
onSave: {$(event.srcElement)addClass("k-state-disabled")}, complete:{ $(event.srcElement)removeClass("k-state-disabled")};

Why does my button click twice in jquery if I put it in submitHandler?

I have a short form, you can see it here http://jsfiddle.net/azxpckg5/1/
and I have a problem - the way to reproduce it is to click the save button. Then there will appear another button called submit. when user clicks it - it disappears and it's fine. But when user repeats this procedure (clicks save again and submit again - he can see that the last click was repeated twice. I believe the error might be somewhere here:
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').click(function() {
//
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
but to be honest I don't know how to fix it and what can be the issue. Can you help me with that?

The issue is because you're attaching another click event handler to the #submitcForm button on every submission of the form (which happens when #saveBtn is clicked. Move the click handler outside of the validate() call and your code will work as you require.
$('#invoiceForm').validate({
// settings...
});
$('#submitcForm').click(function () {
$(".overlay-boxify2").toggleClass("open");
});
Updated fiddle

Use .off() to prevent attaching multiple click eventListener on your button
submitHandler: function (form) {
alert("here!");
$(".overlay-boxify2").toggleClass("open");
$('#submitcForm').off().click(function() { // see the use of .off()
$(".overlay-boxify2").toggleClass("open");
alert("hegdsgsd");
});
return false;
}
See more about .off()

How to enable click functionality of div in javascript or jquery?

I disabled the div by using following code
$("#menuDiv1").children().bind('click', function(){
return false;
});
menuDiv contains
<ul>
<li><a class="home" href="#/Dashboard">Dashboard</a></li>
<li><a class="forms" href="#/ViewLeads">Lead</a></li>
<li><a class="forms" href="#/ViewCases/0">Cases</a></li>
</ul>
but now I want to enable it again. How can I do that?
And is there any other solution for the same in angular js?

you can use unbind to remove disable click event
$("#menuDiv1").children().unbind('click');
To re enable click event use below code.
function clickfunc(){
// your code
}
$("#menuDiv1").children().bind('click',clickfunc);
Second option
you can use off to remove disable click event
$("#menuDiv1").children().off('click');
To re enable click event use below code.
function clickfunc(){
// your code
}
$("#menuDiv1").children().on('click',clickfunc);
EDIT as discussed below code is avoid click event on a,button tags.
DEMO
function clickfunc(event){
if(event.target.nodeName === 'A' || event.target.nodeName == "BUTTON"){
return false;
}
// your code
alert("click")
}
$("#menuDiv1").children().on('click',clickfunc);

You can use unbind to disable and bind to enable again.
$("#menuDiv1").children().unbind('click');
To bind it again
$("#menuDiv1").children().bind('click', clickhander);
You better look to use jQuery.on and jQuery.off instead of bind and unbind.

In Angular you can use ng-click and ng-disabled in combination. For example:
<button ng-click="clicked()" ng-disabled="val">Click</button>
And in controller set the val to true or false to enable/disable click on the button.
$scope.val = true; //To disable button
EDIT:
For div you can do it like this:
<div ng-click="val || clicked()" ng-disabled="val">Click</div>

using on/off you can enable or disable click event
Disable click
$("#menuDiv1").children().off('click');
Enable Click
$("#menuDiv1").children().on('click', function(){
// do here work
});

You would either unbind previously bound click event handler, or prevent event conditionally:
$("#menuDiv1").children().bind('click', function (e) {
if ($(this).hasClass('no-click')) {
e.stopPropagation();
}
});
Btw, it's better to use e.stopPropagation(); explicitly to prevent child-to-parent event bubbling, rather than implicit return false.

Based on the new information in your question, the proper way to do this in AngularJS is to use the $locationChangeStart event.
Plunker
app.run(function ($rootScope, $location) {
$rootScope.$on('$locationChangeStart', function (event, next, current) {
if ($rootScope.menuDeactivated) {
event.preventDefault();
}
});
});
This is a very simplistic example of that sets a variable on the $rootScope, but you could instead run a function (helpful if you want to save form values or prompt the user before changing your route for example) or inject a service (such as if you want to check if a user is logged in), etc.

Why can't I use addEventListener to stop contextmenu event?

I want to prohibit the right mouse button. But I find that if I write this:
document.addEventListener('contextmenu', function(event) {
return false;
}, false);
It will not work, the event will still work.
But if I write it like this,
document.oncontextmenu = function() {
return false;
}
The right mouse button will not work.
I wish to know why I can't use addEventListener to stop the event contextmenu.

As stated in "Preventing the Browser's Default Action", the return of false value is not enough for preventing default action. You need to call preventDefault() method on Event object:
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
}, true);
DEMO

I believe you need to useCapture, try passing true as the third parameter to
document.addEventListener() and see if that doesn't solve it for you.

Action on blur except when specific element clicked with jQuery

There are two elements in play:
$('#myInput') // an input field for search
$('#myList') // a list to display search results
I want to hide the list when the input no longer has focus, like so:
$('#myInput').blur(function() {
$('#myList').hide();
});
This works great, except when a list item is clicked, because the blur event fires and hides the list before the click is registered. The goal is for the list to stay visible when any part of the list is clicked, even though this will cause the input to blur.
How can I do this? Thanks!

You can accomplish this by keeping a global variable, and setTimouts, to wait a delay of 200ms and then check if one of the 2 elements have focus.
var keepFocus = false;
function hideList(){
if(!keepFocus){
$('#myList').hide();
}
}
$('#myInput').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});
$('#myList').blur(function() {
keepFocus = false;
window.setTimeout(hideList, 200);
}).focus(function(){
keepFocus = true;
});

I've faced with the exact same problem, so this is how I solved it.
I came up with the fact that blur() fires earlier than click().
So I've tried to change click() to mousedown() and found out that mousedown() fires before blur().
And to imitate click() you'll have to fire mousedown() and then mouseup()
So in your case I would do something like this:
var click_in_process = false; // global
$('#myList').mousedown(function() {
click_in_process = true;
});
$('#myList').mouseup(function() {
click_in_process = false;
$('#myInput').focus();
// a code of $('#myList') clicking event
});
$('#myInput').blur(function() {
if(!click_in_process) {
$('#myList').hide();
// a code of what you want to happen after you really left $('#myInput')
}
});
Demo / example: http://jsfiddle.net/bbrh4/
Hope it helps!

You need to be able to say "do this blur() unless the list gains focus at the same time".
This question says how to detect if an element has focus: Using jQuery to test if an input has focus
Then all you need to do is:
$("#myInput").blur(function () {
if (!$("#myList").is(":focus")) {
$("#myList").hide();
}
});

Pigalev Pavel's answer above works great.
However, If you want an even simplier solution, you can just "prevent default" in the "mousedown" of an element to prevent the blur event from taking place. (since preventing default actually means that in the end, the input never looses focus in the first place!)
Of course, this is only if you're alright with preventing default in the div. It does have some side-effects, like the text is no longer selectable. As long as that's not an issue, this will work.
I suppose if you hold the mouse down over the div, move the mouse outside of the div, and then release the mouse, it also doesn't fire the "blur" event. But in my case, I wasn't too worried about that either, since the click started in the target div.
$("input").focus(function(){
$(this).val("");
});
$("input").blur(function(){
$(this).val("blur event fired!");
});
$("div").mousedown(function(e){
e.preventDefault();
})
div{
height: 200px;
width: 200px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>
<div>
Click here to prevent blur event!
</div>

The best way to do this is to attach an event handler to the body element, then another handler to the list that stops event propagation:
$(body).click(function () {
$("#myList").hide();
});
$("#myList").click(function (e) {
e.stopImmediatePropagation();
});
This listens for a click outside of #myInput and hides #myList. At the same time, the second function listens for a click on #myList and if it occurs, it prevents the hide() from firing.