I'm trying to make a zoomable image block in an HTML page using javascript.
Now zooming in is finished by capturing Doubleclick event and some simple functions.
Problem is here that I have some elements (div tags like tile) and want to have a function called when right clicked on some of them.
How can I do this?
You can use the contextmenu event:
<div oncontextmenu="javascript:alert('Right Click Performed!');return false;">
Right click on me!
</div>
And then add a listener:
el.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
alert('Right Click Performed!');
return false;
}, false);
javascripts event.button function will give you the mouse button you clicked.
<img onMouseDown="alert(event.button)" src="yourimage" />
right click should return 2 but best check each browser
Related
I am using canvas with html to draw on the screen. The thing I need is to draw with the left click only, and right click just do nothing. I tried the following:
canvas.oncontextmenu = e => {
e.preventDefault();
e.stopPropagation();
}
It disabled the right click menu, but I am able to press the canvas (and eventually draw on it) with both left and right click. What am I missing?
try:
<canvas oncontextmenu="return false;"></canvas>
You can use this:
canvas.bind('contextmenu', function(e){
return false;
});
Using Jquery:
$('body').on('contextmenu', '#myCanvas', function(e){ return false; });
Try the following:
const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;
where myCanvas is eventually the ID given to the canvas, i.e.
<canvas id="myCanvas"></canvas>
Try this:
canvas.addEventListener('mousedown', (event) => {
if (event.which !== 1) {
event.preventDefault();
}
});
It should also disable context menu from appearing. Clicking the middle mouse button won't give any effect too.
event.which contains the index of mouse button that is pressed. 1 is the left button, 2 is the middle, 3 is the right one.
preventDefault() prevents default browser behaviour from being executed (such as opening context menu etc, it can be applied in many situations).
By the way, stopPropagation() is used to stop such events (as context menu opening, in this case) from being executed at child elements. <canvas> doesn't have child tags, so it can be omitted.
I'm already search a lot but still can't find the right answer.
I wonder why middle click (scroll button) can't load onclick function on Firefox only while on Chrome it works. So instead of onclick function it shows href link which is javascript:void(0)
<a href="javascript:void(0);" onclick="open_tab();">
Javascript
function open_tab(){
my_tab=window.open('http://www.google.com/', my_tab);
}
Tell my why. Thanks a lot.
I don't have a middle click on this computer to test this, but to make your middle click cross browser compliant, I would add a event listener in javascript:
var open = document.getElementById('opentab');
open.addEventListener ("click", function (e) {
if (e.which === 2) {
e.preventDefault();
open_tab();
}
});
This depends on adding an ID to your link like:
Open Tab
Also, correctly pointed out by espascarello, the mozilla community abandoned firing on click events on middle and right press: http://bugzilla.mozilla.org/show_bug.cgi?id=180078
To accomplish this for all browsers
I made it a bit simple
function open_tab(){
my_tab=window.open('http://www.google.com/', "Google");
}
var link = document.getElementById("alink");
link.addEventListener("mousedown", function(e) {
e.preventDefault();
if(e.which===1||e.which===2){
open_tab();
}
});
<a id="alink">Open Google</a>
The line
if(e.which===1||e.which===2){
Makes sure that the window opens only on left and middle mouse click.
It works fine for me!!!!!!!! Hope it helps!
Sorry for my English, I'm not native English speaker.
I have problem with my code. I have on page something like this:
$('#hook label').on('click', function() {
console.log('ok');
icon = $(this).next('input').val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hook">
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
</div>
And this code is running twice if I click on image, but only one when I click on input or label element. How can I prevent to running this twice?
Here is example: http://jsfiddle.net/00akgoe7/2/
It's because of the default behavior of label. To stop that, you need to tell to the event object to stop is default behavior like this:
$('#hook label').on('click', function(ev) {
ev.preventDefault();
console.log('ok');
icon = $(this).next('input').val();
});
Clicking on a label associeted with the for attribute or inside the label, focus the input with a "fake" click event. This is why you get the event twice since by extension, if you click the input, you click the label (the parent) also.
It's two times because when you click on the label it send a click event also to the input and the new event bubbles back to the label. It's tricky :)
It's in all browsers for a better form usability.
So the another possible solution is:
$('label').click(function(e) {
if (e.target.tagName === "LABEL") {
alert("!! here")
}
});
Try it live: http://jsfiddle.net/8qffhwm3/2/
You just need to add a preventDefault().
$('#hook label').on('click', function(e) {
e.preventDefault();
console.log('ok');
});
I expect that it help you.
If you want prevent from the event being fired twice, you can use the 'mousedown' event handler. It will just be triggered once, as it is not triggered by standard by clicking the label.
I am using the bootstrapX clickover demo'ed here: http://www.leecarmichael.com/bootstrapx-clickover/examples.html
<img class="img-circle" src="something" alt="something"
rel="clickover"
onclick="loadData(this, somedata)" />
loadData(element, somedata){
if(!$(element).attr('data-content')) {
// build clickover flyout html
$(element).clickover('show');
} else {
// do nothing clickover is already attached
}
}
This works... almost.
When I click the image element for the first time I have to close the clickover by clicking on the image otherwise it does not close even if I click open other clickovers or just click on the body of the page.
Any following clicks that show the clickover can be hidden by a click anywhere else which is how it should work. I have tried to close all other clickovers, unbind the click event and more with no success. I need to bind the loadData event in html and not in javascript as the clickover's onShown because this code runs in a loop and this data is specific to the element which is not very uniquely identifiable.
Any idea on how I could fix this?
The behavior you describe seems the same for global_close=0.
$(element).clickover('show'); don't set default options.
Use $('.img-square').clickover().click(); in stead of $('.img-square').clickover('show'), see: http://bootply.com/66601 and https://github.com/lecar-red/bootstrapx-clickover/issues/42
I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.