We Keep Coding

Stop onclick method running with jQuery

I have a button similar to below
<button id="uniqueId" onclick="runMethod(this)">Submit</button>
What I'm trying to do is stop the runMethod from running, until after I've done a check of my own. I've tried using the stopImmediatePropagation function, but this doesn't seem to have worked. Here's my jQuery:
$j(document).on('click', '#uniqueId', function(event) {
event.stopImmediatePropagation();
if(condition == true) {
// continue...
} else {
return false;
}
return false;
});
Note: runMethod basically validates the form, then triggers a submit.

What you want to do, especially in the way that you want to do it, requires a some sort of workaround that will always be a bit fiddly. It is a better idea to change the way the button behaves (e.g. handle the whole of the click event on the inside of the jQuery click() function or something along those lines). However I have found sort of a solution for your problem, based on the assumption that your user will first hover over the button. I am sure you can extend that functionality to the keyboard's Tab event, but maybe it will not work perfectly for mobile devices' touch input. So, bear in mind the following solution is a semi-complete workaround for your problem:
$(document).ready(function(){
var methodToRun = "runMethod(this)"; // Store the value of the onclick attribute of your button.
var condition = false; // Suppose it is enabled at first.
$('#uniqueId').attr('onclick',null);
$('#uniqueId').hover(function(){
// Check your stuff here
condition = !condition; // This will change to both true and false as your hover in and out of the button.
console.log(condition); // Log the condition's value.
if(condition == true){
$('#uniqueId').attr('onclick',methodToRun); // Enable the button's event before the click.
}
},
function(){
console.log('inactive'); // When you stop hovering over the button, it will log this.
$('#uniqueId').attr('onclick',null); // Disable the on click event.
});
});
What this does is it uses the hover event to trigger your checking logic and when the user finally clicks on the button, the button is enabled if the logic was correct, otherwise it does not do anything. Try it live on this fiddle.
P.S.: Convert $ to $j as necessary to adapt this.
P.S.2: Use the Javascript console to check how the fiddle works as it will not change anything on the page by itself.

Your problem is the submit event, just make :
$('form').on('submit', function(e) {
e.preventDefault();
});
and it works. Don't bind the button click, only the submit form. By this way, you prevent to submit the form and the button needs to be type button:
<button type="button" .....>Submit</button>
Assuming there's a form that is submitted when button is clicked.

Try adding
event.cancelBubble();
Hence your code becomes:
$j(document).on('click', '#uniqueId', function(event) {
// Don't propogate the event to the document
if (event.stopPropagation) {
event.stopPropagation(); // W3C model
} else {
event.cancelBubble = true; // IE model
}
if(condition == true) {
// continue...
} else {
return false;
}
return false;
});

Your code is mostly correct but you need to remove J:
$(document).on('click', '#uniqueId', function(event) {...
You also need to remove the onClick event from the inline code - there's no need to have it there when you're assigning it via jQuery.
<button id="uniqueId">Submit</button>

jQuery Click Not Working in Safari

For some reason, this script isn't working in Safari (tested on Windows, think it happens on Mac, too, though):
$("#searchTerms").focus(function() {
$(document).keypress(function(e) {
if(e.which == 13) {
$("#searchBtn img").click();
}
});
});
jsFiddle: http://jsfiddle.net/ux86V/
The script is supposed to click an image when a user presses enter while focused on a search box (it has to be set up this way, it's tied in to some weird third party service).
EDIT: It doesn't appear to work at all in the jsFiddle, but it does, so don't just assume the entire script is bad. I think jSFiddle just prevents redirects, and I have it set up to redirect to google.com for the example.
EDIT 2: It appears to be an issue with .click(). Is there an alternative to this that I could use, or is .click() the only way to register a click on an element?
EDIT 3: After more testing, it seems like the jQuery click event is somehow not working properly. It may have something to do with the way the form is submitted, I'm not sure. Link to live demo: http://www.weblinxinc.com/beta/blue-sky-marketing/demo/

13 is the code of enter key which is a special key , you can catch it on keyup only

try to use trigger();
$("#searchTerms").focus(function() {
$(document).keyup(function(e) {
if(e.which == 13) {
$("#searchBtn img").trigger("click");
}
});
});​

Regarding JQuery autosize

I have a textbox that autosizes using JQuery Autosize, however I can't seem to get a certain function to work properly.
When I press the "Enter" key, I need the textbox to go back to 1 row, with no value. However I can't seem to get it to work, my textbox consistently gets 2 rows. I've tried e.preventDefault() to no avail. Can someone help?
I have a fiddle you can access here to look at my code:
http://jsfiddle.net/RZjq7/
Thanks in advance!
Yours,
Rei

Rei,
You need to use preventDefault to cancel the Enter keypress and manual trigger autosize to call the adjust function of the plugin
$(function() {
$('textarea').autosize();
$('textarea').keypress(function(e) {
if (e.which == 13 && !e.shiftKey) {
$('textarea').val('');
$('textarea').trigger('autosize');
e.preventDefault();
}
});
});​

Submit a form with mouse middleclick button

I'm working on a system and I want to make the system easier to use.
I have few forms on a page and huge tables in each. I'm not good at JS so any advice would be appreciated.

Use a click event listener:
document.body.addEventListener('click', function(e){
if (e.button == 1){
document.formname.submit();
}
});
EDIT:
As per the new jQuery tag, it's slightly faster:
$('body').click(function(e){
if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
// IE exception thanks to #Elias Van Ootegem
$('form.myForm').submit();
}
});

Triggering onclick event using middle click
THE Above link will help.
$("#foo").live('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
The first line of jQuery allows it to work on the current line page,
'click' its telling it what event it has to listen for, and when the event is called it calls the function defined with the parameter e,
As it is the middle click you are looking for do a if statement to see what has been pressed, in your case you want which to equal 2.
Now as there may be some default actions set for this key, do e.preventDefault() so you able able to use your own code.
Al tough i would recommend using the enter key to submit a form as this is the everyday way of doing it.
I would recommend reading this aswell: http://unixpapa.com/js/mouse.html

How can I prevent a user from middle clicking a link with javascript or jquery

I want to prevent the user from being able to middle click a certain link to open a new tab. I have tried the following:
$(window).on('mouseup', '.sptDetails', function(e){
e.preventDefault();
if(e.button == 1){
return false;
}
});
This doesn't seem to work.

It's an unfortunate combination of jQuery and the browser. To prevent the new tab from opening you have to use the click event (rather than mouseup), but jQuery does not run delegate click handlers for mouse buttons other than the left one:
// Avoid non-left-click bubbling in Firefox (#3861)
if ( delegateCount && !(event.button && event.type === "click") ) {
What you can do is using a non-delegate handler and check the target element yourself: http://jsbin.com/ojoqap/10/edit. This works on Chrome, at least (inspired by #Abraham).
$(document).on("click", function(e) {
if($(e.target).is("a[href]") && e.button === 1) {
e.preventDefault();
}
});

Remember, this is a bad idea. I do not recommend doing this. See the comments above. But here's how to detect middle-click:
if (e.which == 2)
return false

I'm guessing you're trying to make sure that some navigation remains in your 'parent' page.
I think approaching this from another angle might be appropriate.
Assuming you don't need to worry about non-JS users, as an alternative to preventing a middle click, I might suggest loading the content via an ajax call and inserting it into your current page.
This could be accomplished with a little javascript while leaving it usable (though maybe not ideally by users with JS turned off)
Just something to think about. There's plenty of ways to improve upon this idea I'm sure.
HTML:
<a href="/mylink" id="href-load-content">
<div id="content-pane"></div>
Javascript:
$(function() {
$('#href-load-content').data('href', function() { return $(this).attr('href') } )
.attr('href', 'javascript:return;')
.on('click', function() {
$.get($(this).data('href'), function(msg) { $('#content-pane').html(msg); });
});
});

Hi go through this reference..
http://delphi.about.com/od/objectpascalide/l/blvkc.htm
middle mouse keycode is 4
so you can try like this
if(e.which==4|| e.keycode==4)
e.returnValue=false;

// Google<br> Bing
$(function(){
$(document).on("click", function(e){
if($(e.target).is("#google") && e.button===1)
e.preventDefault()
})
})
FIDDLE LINK

None of the answers above worked for me. According to MDN the auxclick event is the proper way to do this.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.