Develop Reference

Is a best common way to solve button click too fast?

I have a button.when click button, show a dialog to select data.
If click the button so fast,multi dialog will be show.
At present，I have two way to solve this problem
1.use disabled
2.use setTimeout and clearTimeout
have any other better way to solve this problem?
thank you very much
explain:
if use disabled,after dialog close,need to set the button available.
at present,I use this code
Util.prototype.lazyTriggerEvent = function(buttonId,event,callback){
var searchTrigger=null;
$("#"+buttonId).bind(event,function(){
var text = $.trim($(this).val());
clearTimeout(searchTrigger);
searchTrigger = setTimeout(function(){
callback(text);
},500);
})
};
//Util.lazyTriggerEvent("showDialgBtnId","click",function(){})
if click button trigger a ajax，and have much more button like this，is a best common way to solve this problem.

You can use jquery's .one() handler which limits a function to running once:
JQuery's .one() handler
Description: Attach a handler to an event for the elements. The
handler is executed at most once per element per event type.
$('button').one('click', function() {
// Do stuff
});
Or you can also disable the button on click:
$('button').click(function() {
$(this).prop('disabled', true);
// Do stuff
});
To re-enable the button, you can simply add the following to your close modal function:
$('button').prop('disabled', false);

I suppose when you want to show a dialogue, you execute a function called showDialogue() .
In your showDialogue(), you'll be able to check whether your dialogue was initiated.
Keep your mind off the button. Focus on the showDialogue().
If your dialogue was initiated, then do not execute the rest of your code in showDialogue(), as if showDialogue() isn't executed twice. It gives an illusion that the multi click isn't working. Is it the solution you desire, without disable and setTimeout?

Use disabled at first, and then when the dialog displays, enable the button.

JQuery: trigger() not calling related target

I have used the trigger() for checking the radio button after loading all the page content as the radio button value is coming from third party api.
I have make one option checked by default. So I used trigger() event for checking the radio button. The radio button have also it's click event.
In my code only radio button get selected but event is not firing.
my code is...
jQuery(document).ready(function($) {
jQuery("#btn_03").attr('checked', 'checked');
jQuery("#btn_03").trigger("change");
jQuery(".class input[type='radio']").live("change", function($) {
alert("clicked");
});
});

You need to assign the event handler before you trigger the event.
When you are actually triggering the event, you still haven't attached any listeners for that event. You are doing that in the next line. Thus the event change does get triggered but nothing happens on that event.
You can do it this way
jQuery(document).ready(function($) {
jQuery("#btn_03").attr('checked', 'checked');
jQuery(".class input[type='radio']").on("change", function($) {
alert("clicked");
});
jQuery("#btn_03").trigger("change");
});
Also use "on" to bind events instead of "live" as per the latest jQuery documentation

You need to trigger event after you attach event handler:
jQuery(".class input[type='radio']").on("change", function(e) {
alert("clicked");
});
jQuery("#btn_03").prop('checked', true).trigger("change");
Also use $.fn.on instead of long time ago deprecated $.fn.live. And it's better to set checked property instead of attribute.

You need to hook the change event before you actually call the change event. I've included a fiddle of the functionality you requested.
I've changed the change-event target to be the actual radio input since I did not have your html, but normally you would most likely want to use the name of the radio group to hook the event to, since those are usually coupled with a single behaviour - like so $("input[name='radioName']").change(function(){ // Change event code });
Sidenote: You can use '$' instead of of 'jQuery' to start an expression.
http://jsfiddle.net/du58fo3t/
$(document).ready(function() {
$("#btn_03").attr('checked', true); // Check radio button
// Hook change event on radio button
$("#btn_03").change(function() {
alert("clicked");
});
// Trigger change on radio button
$("#btn_03").trigger("change");
});

How to prevent div.click event when another element clicked

I want to prevent click event but e.stopPropagation() doesn't work.
I'm trying to write something like Jtable . I use div as pagination buttons(1) and another element is delete button.
I need to disable pagination buttons when delete confirmation box is popping up . After click del or cancel "I want my pagination buttons work again".
Is there any solution?
function deleteit() {
$(".del").click(function() {
$(".divbutton").click(function(e) {
alert(1);
e.stopPropagation();
});
}
$(".deletebtn").click(function() {
deleteit();
});
$(".divbutton").click(function() { // I want to prevent this from click
//ajax send and display data
});
I know that I should use input disabled instead of div, but I need to use div.
edit:add image to make it understandable.

Instead of preventing the click handler... remove the registered handler using .off(), here namespaced event name is used because we want to remove only a very specific handler
function deleteit() {
$(".del").click(function () {
$(".divbutton").off('click.delete')
})
}
$(".deletebtn").click(function () {
deleteit();
});
$(".divbutton").on('click.delete', function () { // I want to prevent this from click
//ajax send and display data
});
Why your code is not working? because stopping propagation will prevent the bubbling up of the event but in your case both the event are registered to the divbutton so both of them will get triggered even if propagation is prevented.
Another way is to use stopImmediatePropagation() even that is not possible here because your delete registers the handler later and it will get executed only after the first one is called

disable all click events on page (javascript)

Whats the easiest way to temporarily disable all mouse click/drag etc events through javascript?
I thought I could do document.onclick = function() { return false; }; ...etc, but that's not working.

If the objective is to disable click on the whole page then you can do something like this
document.addEventListener("click", handler, true);
function handler(e) {
e.stopPropagation();
e.preventDefault();
}
true argument in addEventListener would ensure that the handler is executed on the event capturing phase i.e a click on any element would first be captured on the document and the listener for document's click event would be executed first before listener for any other element. The trick here is to stop the event from further propagation to the elements below thus ending the dispatch process to make sure that the event doesn't reach the target.
Also you need to stop default behavior associated with event target elements explicitly as they would be executed by default after the dispatch process has finished even if the event was stopped propagating further from above
It can be further modified to use selectively.
function handler(e) {
if(e.target.className=="class_name"){
e.stopPropagation();
e.preventDefault();
}
}
handler modified this way would disable clicks only on elements with class "class_name".
function handler(e) {
if(e.target.className!=="class_name") {
e.stopPropagation()
}
}
this would enable clicks only on elements with class "class_name".
Hope this helped :)

Dynamically disable all clicks on page
let freezeClic = false; // just modify that variable to disable all clics events
document.addEventListener("click", e => {
if (freezeClic) {
e.stopPropagation();
e.preventDefault();
}
}, true);
I often use it while loading or to avoid user to accidentally clic twice on an action button. Simple and performance friendly :)
Please check this working example
Alternative CSS way
Another one that I really like because of the visual feedback the user have:
/* style.css */
.loading {
cursor: wait; /* busy cursor feedback */
}
.loading * {
/* disable all mouse events on children elements */
pointer-events: none;
}
A simple example to dynamically add the .loading class:
const elm = document.getElementById('myElm')
elm.classList.add('loading')
myAsyncFunction().then(() => elm.classList.remove('loading'))

If you want absolutely nothing draggable/clickable, disabling typing in input fields etc, I'd consider showing a absolutely positioned transparent div over the entire page, so that every click will be on the div, which will do nothing. That will grant you swift and neat switching on and off of this click-disabler, without having to register heaps of listeners

The winning answer works well, but if you had pass the capture true boolean value, at the moment you want to remove the listener, you have to pass the exact same value. Otherwise, the listener removal will not work.
Example:
listener addition
document.addEventListener('click', DisableClickOnPage.handler, true);
listener removal
document.removeEventListener('click', DisableClickOnPage.handler, true);
Doc: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

window.addEventListener("click", (e) => {
e.stopPropagation();
e.stopImmediatePropagation();
e.preventDefault();
}, true)
If we added a listener to document instead of window anyone can add a listener to window and it works. Because of document child of window and its events trigger always after window events.
We use 3 method of Event object.
stopPropagation for prevent all capturing and bubbling
stopImmediatePropagation for prevent same listeners (e.g. another window click listeners)
preventDefault for prevent all user agent event (e.g anchor href or form submit)

If onclick = null has been executed how to revoke the onclick event to normal functioning.. or
Link text
<script type="text/javascript">
function yourFunction(anchor)
{ if(anchor.disabled) return;
/* Your function here */
}
</script>

This article would probably be useful:
http://www.computerhowtoguy.com/how-to-use-the-jquery-unbind-method-on-all-child-elements/
One part in particular is a recursive function that removes all click events. Remember that jQuery will remove click events IF the click event was created using jQuery. the function given in the article will remove both those created with jQuery and those that were not. The function given is this:
function RecursiveUnbind($jElement) {
// remove this element's and all of its children's click events
$jElement.unbind();
$jElement.removeAttr('onclick');
$jElement.children().each(function () {
RecursiveUnbind($(this));
});
}
You would call the function like this:
RecursiveUnbind($('#container'));
That function takes a jQuery object parameter, but you could easily change it up to pass a string as the name of the ID for the element, or however you think is best.

To prevent the default behavior of an event, use event.stopPropagation() and event.preventDefault() in your event handler. And don't forget, return false; is another method for indicating that you want to cancel the default action...
The Event property returnValue indicates whether the default action for this event has been prevented or not. It is set to true by default, allowing the default action to occur. Setting this property to false prevents the default action. (Source: MDN Web Docs: Event.returnValue.)
Typically, we return a value from any function when it has any meaningful or useful purpose -- return false to cancel an event is meaningful because it indicates a failed event, and it's useful because the event-handler uses it.
For greatest cross-browser compatibility, remember to return false;...
document.addEventListener("click",handler,true);
function handler(e){
e.stopPropagation();
e.preventDefault();
return false;
}

How to remove all click event handlers using jQuery?

I'm having a problem. Basically, when a user clicks an 'Edit' link on a page, the following Jquery code runs:
$("#saveBtn").click(function () {
saveQuestion(id);
});
By doing this, the onClick event of the save button calls the saveQuestion() method and passes on the ID of the question for which the 'Edit' link was clicked.
But if in the same session the user clicks edit on 2 questions, then instead of overwriting the previous click event handler, it instead causes 2 event handlers to run, one which might call saveQuestion(1) and the other might call saveQuestion(2). By doing this 1 question overwrites the other.
Is there a way to remove all previous click events that have been assigned to a button?

You would use off() to remove an event like so:
$("#saveBtn").off("click");
but this will remove all click events bound to this element. If the function with SaveQuestion is the only event bound then the above will do it. If not do the following:
$("#saveBtn").off("click").click(function() { saveQuestion(id); });

Is there a way to remove all previous click events that have been assigned to a button?
$('#saveBtn').unbind('click').click(function(){saveQuestion(id)});

$('#saveBtn').off('click').click(function(){saveQuestion(id)});

If you used...
$(function(){
function myFunc() {
// ... do something ...
};
$('#saveBtn').click(myFunc);
});
... then it will be easier to unbind later.

$('#saveBtn').off('click').on('click',function(){
saveQuestion(id)
});
Use jquery's off and on