This is a simple code :
HTML
<a id="link" href="#">Ciao</a>
jQuery
$('#link').click(function () {
alert("ciao");
});
in fact, left/middle button is triggered (the alert is printed) but with Right Click? Why not? And how can I trigger it?
Bind mousedown to handle left, middle and right clicks:
$('#link').mousedown(function(e) {
alert("ciao");
});
You can use e.which to determinate which button has been clicked. 1: left, 2: middle and 3: right.
Here's the demo: http://jsfiddle.net/fPhDg/9/
You can stop the contextmenu from appearing like this:
$('#link').contextmenu(false);
Demo: http://jsfiddle.net/y4XDt/
You should use this very very carefully! It only makes sense in some very rare cases.
Use .contextmenu(...):
$('#link').contextmenu(function () {
alert("ciao");
});
And if you want to catch both events, you could use the bind(...) function:
$('#link').bind('click contextmenu',function()
{
alert("ciao");
});
http://jsfiddle.net/fPhDg/4/
You can subscribe to the click event and the contextmenu event like so:
$('#link').on('click contextmenu', function (e) {
if (e.which === 3) {
// Right mousebutton was clicked
// 1 is left mousebutton
// 2 is centre mousebutton
}
});
try this...
$('#link').mousedown(function (event) {
if(event.which === 1)
alert("left click");
if(event.which === 2)
alert("center click");
if(event.which === 3)
alert("right clikc");
});
fiddle : http://jsfiddle.net/fPhDg/8/
you can capture right mouse click like this :
<head>
<script>
function whichButton(event)
{
if (event.button==2)
{
alert("You clicked the right mouse button!");
}
else
{
alert("You clicked the left mouse button!");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Click in the document. An alert box will alert which mouse button you clicked.</p>
</body>
Related
On my bootstrap carousel, I trigger today an event based on slide.bs.carousel, but I would like to restrict it to only sliding to the right direction.
Current code (working)
$('#carousel').on('slide.bs.carousel', function(e) {
alert('slided a slide');
});
My attempt at only triggering it when user slide to the right (not working):
$('#carousel').on('slide.bs.carousel', {direction: 'right'}, function(e) {
alert('slide a slide in the right direction');
});
How to achieve this?
The event has an direction property (but in my case the direction are inversed 'right when I click on left'), can't you just make a condition on it like this ?
$('#carousel').on('slide.bs.carousel', function(e) {
if ('right' == e.direction) {
alert('slided a slide');
}
});
Can use preventDefault to restrict it
$('#carousel').on('slide.bs.carousel', function (event) {
if(event.direction === 'left'){
event.preventDefault()
}
})
I have a div which should be visible, whenever a button is clicked. It's like a menu. Afterwards, it should disappear (toggle), when the button is clicked again or when the user clicks somewhere else on the page (whole body).
In my current approach, the menu constantly toggles, so both functions (see below) are being triggered.
$("#b1").click(function() {
$("#menu").toggle("slide");
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
How should I improve my code, so that the menu only disappears when the button is clicked again or when the user clicks somewhere else?
Here is a fiddle.
Use $(window) to attach the event, then you can close the menu anywhere.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false;
});
$(window).click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
Check demo: https://jsfiddle.net/wru8mvxt/5/
You can use e.target and check whenever it's not the menu or the button which got clicked. Otherwise the menu closed even on the button click or on a click inside.
$("#b1").click(function() {
$("#menu").slideDown();
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
} else {
e.preventDefault();
}
});
If you want the menu to stay even on click inside, just add && !$(e.target).is("#menu") to the if condition.
Working example.
I think your code looks good.. I see one problem when you click on menu it will be hide.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false; // prevent to pass click event to body
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
$("#menu").click(function(e){
e.preventDefault();
return false;
});
Use something like this:
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Try this.
$("#b1").click(function() {
event.stopPropagation();
$("#menu").toggle("slide");
});
$("body").click(function() {
if(!$(event.target).closest('#menu').length){
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
}
});
I think this code will solve your issue. You can use e.target property to find whether user clicked on button or outside button. When user click on button b1 it enters both b1 click event and body click event. So if in order to find where the user is clicked you can use event.target property.
Clicking the button will toggle the menu visibility.
Clicking outside the button will close the menu if it is opened.
$("#b1").click(function() {
$("#menu").toggle("slide");
$("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu");
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
}
else {
e.preventDefault();
}
});
Working fiddle
You have to do following changes.
$(document).ready(function() {
$("#b1").click(function(e) {
$("#menu").slideToggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#menu, #menu *')) {
$("#menu").slideUp();
}
});
});
how can I trigger two mouse events simultanious (hold right clic and mouse weel) I have to press the right button of the mouse and hold on and at the same time I roll the wheel
$("selector").bind("click mousewheel", (function(event, delta) {
console.log("xxx")});
This may be not exactly you want but it works...
Fiddle here
var rightButtonDown = false;
$(document).mousedown(function (e) {
if (e.which === 3) rightButtonDown = true;
});
$(document).mouseup(function (e) {
if (e.which === 3) rightButtonDown = false;
});
$(document).mousewheel(function (event, delta, deltaX, deltaY) {
if (rightButtonDown) {
console.log("fire!")
}
});
Include a jQuery plugin to handle the mousewheel event.
Try this demo http://jsfiddle.net/HeDPZ/
Try event mousedown for any kind of click i.e. right or left.
Behavior - with the mouse click of when you move wheel you will see an alert poping.
Another thing is there is a small syntax error in your closing brackets.
For OP: Do you mind telling us bit more as to what kind of functioanlity you are aiming for just so that we can help you out in more detail.
Captureing event like this http://jsfiddle.net/dQWNY/ more here: Detect middle button click (scroll button) with jQuery
Left - 1
Middle - 2
Right - 3
I hope this is fits your need :)
Code
$(".vendor-icon").bind("mousedown mousewheel", function (event, delta) {
alert("xxx");
});
Associated html
This code is working, when the mouse is "UP" in the document:
$(document).on("mouseup", function () {
alert("mouseup");
});
But how to make alert(), when the mouse is UP on the scroll button?
You can you the "scroll" event handler:
$(window).scroll(function() {
alert("mouseup");
});
With jQuery API:
.mouseup( handler(eventObject) )
$(document).mouseup(function(e){
if(e.which == 2){ //2 is the code for the middle button
//some codes...
}
});
http://jsfiddle.net/DerekL/3wmaK/
Is there any function for hiding 'DIV's or other html elements on right click, some tutorial, script, simple code javascript or jquery. Example: when is click on link or tag or 'li' or 'Ul' or 'a' with right click to hide this element... How to do that?
UPDATE: Yes, all your solutions is OK but please view this code and why doesn' work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).on("mousedown", "div, img, span, a", function () {
if (event.which === 3)
$(this).hide();
});
</script>
<?php
$url = 'http://www.kupime.com/';
$data = file_get_contents($url);
$data = '<head><base href='.$url.' target="_blank" /></head>'.$data;
echo $data;
?>
And when I click nothing happend. WHY?
You can use event.which in your mousedown handler to surmise whether the user clicked with the left, or right mouse button.
$(document).on("mousedown", "div", function() {
if (event.which === 3)
$(this).hide();
});
See this answer for more info on event.which
EDIT
Naturally, if you want to hide elements other than just div, you can comma-delimit them in on's selector
$(document).on("mousedown", "div, img, span, a", function () {
if (event.which === 3)
$(this).hide();
});
Or if you want to hide anything that's right clicked
$(document).on("mousedown", "*", function () {
if (event.which === 3)
$(this).hide();
});
$("#yourDivId").click(function(e) {
if(e.which === 3) { $(this).hide(); }
});
I found the answer right here.
That will show you how to know if you clicked it with the right mouse button.
It will turn out to be like this:
$("body").children().click(function(e) {
if(e.which === 3) { $(this).hide(); }
});