Disable mouse double click using javascript or jquery - javascript

I have a form in which i have some text boxes and below to it there is a table.When i double click on table row it takes me to another page.
Now the problem is if i double click on text boxes also it is going to another page so,i need to disable mouse clicks on this text boxes and also used tr for header and another tr for data.when i click tr header also it should n't work.
Note:
i have many text boxes so making each one double click mouse disabling is n't good solut.If i click row with data alone that double click should work.

it should be like this
$('.myTextBox').dblclick(function(e){
e.preventDefault();
})

add a class='myClickDisabledElm' to all DOM elements whose clicks you want to stop.
<input type="text" class="myClickDisabledElm" />
now javascript
jQuery('.myClickDisabledElm').bind('click',function(e){
e.preventDefault();
})
Edit
Since you are more concerned abt double click you may use dblclick in place of click

As said here, use a capture phase event listener:
document.addEventListener( 'dblclick', function(event) {  
alert("Double-click disabled!");  
event.preventDefault();  
event.stopPropagation(); 
},  true //capturing phase!!
);

Got the following code from here
jQuery code to disable double click event on the webpage.
$(document).ready(function(){
$("*").dblclick(function(e){
e.preventDefault();
});
});
Above jQuery code will disable double click event for all the controls on the webpage. If you want to disable for specific control, let's say a button with ID "btnSubmit" then,
$(document).ready(function(){
$('#btnSubmit').dblclick(function(e){
e.preventDefault();
});
});

If you want to disable any mouse click action use addEventListener(event, function, useCapture) .
Onclick ,call this function.
For more refer here.:
https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Related

Adding to innerHTML of document.body causes jQuery .on() to not find its target

So I have some dynamically generated HTML stuff. If you click a button, it adds some html that has another button, and you can add that other html several times, generating several copies of it. This is all inside of a <form> tag, so I need to use e.preventDefault() on each button to prevent javascript from trying to submit the data. Each button also has its own code for onclick. There's a problem with javascript-added click events on newly generated content however. If I have <button class="myBtn"></button>, then in javascript I have $(".myBtn").click(...), that will work just fine, but only for buttons that already exist when the javascript code is run, meaning newly generated buttons won't have the event attached. The solution to that problem is found here.
Now we come to the real issue. That all works perfectly, but only until I add to document.body.innerHTML. As soon as I execute the line document.body.innerHTML += "Text", the code from the link above no longer executes when the generated button is clicked.
I have an example here: https://jsfiddle.net/6hvgatLy/1/
You are re-writing the whole body innerHTML which will remove all event listeners
Use append() instead
Change
$("#deadlyBtn").click(function(e){
e.preventDefault();
document.body.innerHTML += "Now try clicking [Add new Input]"
})
To
$("#deadlyBtn").click(function(e){
e.preventDefault();
$('body').append("Now try clicking [Add new Input]")
})
DEMO
Alternatively you can change your event delegation to an asset that isn't being overwritten like body or document
$(document).on("click", ".formDiv .innerContainer .innerBtn", function(e){
e.preventDefault()
$(this).before($('<input type="text" placeholder="Textbox"/>'))
})

Click event not always triggering

I'm using the bootstrap editor jquery plugin. I'm trying to set an event listener to the add hyperlink button, but it only gets triggered when the text input next to it is empty, otherwise it does not fire. Here's my jsfiddle. My code:
$('.dropdown-menu button').on('click', function () {
alert("ADD clicked");
});
To test the jsfiddle, simple select some text and press add without inputting a URL.
Then, select the text again, input a URL and press add, no alert() will be shown.
Any ideas why this is happening?
Something in this line is changing the behaviour for a reason I can't see right now:
$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
If you remove it, seems work, so, something in dropdown (i guess) is doing something wrong for you

Jquery toggle, if javascript is disabled take user to a page

I have a div that appears and disappears through the use of a jquery toggle. When yuo click a link the div appears or disappears.
Is there a way to make it so if javascript is disabled and a user clicks the link they are taken to a page instead?
Is there anything I should do when using a toggle to ensure it doesn't encounter problems?
Make the link take the user where you want them to go if js is disabled by default. Then use jQuery's preventDefault() on the click event (where you are probably defining your toggling behavior).
So the link should work on its own:
<a id="functioning-link" href="/js_disabled_page">Toggle my div</a>
Your jQuery should grab the click event to toggle your div, which will only work if jQuery/js is enabled:
$(function(){
$("#functioning-link").click(function(e){
e.preventDefault();
$("div").toggle();
});
});
You can use both href and onClick for this.
If the javascript is disabled, href fires up
else onClick!
For example:
Click to toggle
Javascript:
toggle = function() {
// Your code here
return false;
}

How to select check box without selecting the whole row (see body)?

Say, I have an html:
<div class="row">
<input type="checkbox">
</div>
When user clicks on the whole row, it becomes highlighted (selected class added by an onClick event). I attach onClick event to elements with class .row.
When user clicks on checkbox (which is inside .row), this checkbox becomes selected. But row should not be highlighted.
Is it possible to exclude the area of the checkbox from the area of the .row for an onClick event?
UPDATE
Here is what I have now: http://jsfiddle.net/saAGU/
I don't want class to be toggled when I click exactly on checkbox.
UPDATE 2
Here is the working solution with jQuery for future use: http://jsfiddle.net/saAGU/2/
Yes, it's possible. The right way to do it is putting a onclick event on the checkbox, capture the event and stop its propagation.
Something like this:
function checkboxClick (e) {
e.stopPropagation();
}
Please tell me if it worked
add click event to every checkbox and stop its propogation .this should work -
e.stopPropagation in event handler for checkbox click
http://jsfiddle.net/saAGU/3/
If you capture the event, and look at the event.toElement, you can see if they clicked on the .row or something else.
http://jsfiddle.net/saAGU/1/
$('.row').click(function(event){
if (event.toElement !== this) // Did the user click on the row directly?
return;
$(this).toggleClass('selected');
});

Run javascript/jquery after text change but before submit

I have an input element on a form along with a submit button.
I want to run the change event on the input element all whenever a change occurs. The problem is if end user changes text and clicks submit button the code in the change event doesn't run.
Immediately after user clicks the submit button, the form submits (like the change is not getting time to run, the same occurs with blur or focus out).
My controls can be placed on any form, and I do not control the click event of the button.
Help please
If you're wanting to catch whenever input in a textbox is changed try this in the document.ready
$("input[type='text']").change( function() {
$("#SubmitButton").attr('disabled', 'disabled');
// check input ($(this).val()) for validity here
// after text is updated..etc, enable the button
$("#SubmitButton").removeAttr('disabled');
});
may be you want use event.preventDefault
Expanding on #Aleks G's comment, the best thing for you to do is trigger your change handling on more than just the change event. Beyond keyup, I've found you also need to be careful to handle pasting with the mouse (doesn't trigger the keyup or change event):
yourInput.bind('change keyup paste', function() {
// Your code
});

Categories