I have this piece of code in my page
<body onmouseup="fun()">
.......
.......
<button id="ele">Exclude</button>
</body>
How can i achieve something like this
function fun()
{
if(MOUSE RELEASE IS ON TOP OF BUTTON #ele)
{
console.log('Mouse released on top of the button');
}
else
{
console.log('Mouse released');
}
}
If you're using jQuery I would suggest using .on() to bind events. You can use the event.target element to see if it was the button.
$(document).ready(function(){
$('body').on('mouseup', fun);
function fun(event){
if($(event.target).is('#ele')){
console.log('Mouse released on top of the button');
}else{
console.log('Mouse released');
}
}
});
Use event.stopPropagation, like this:
html
<button id="ele">Exclude</button>
<br>
<br>
<div>fun</div>
js
document.body.onmouseup = function(){ fun(); };
function fun(){
console.log("fun");
}
var el = document.getElementById("ele");
el.onmouseup = function(e){ e.stopPropagation(); };
demo: http://jsfiddle.net/GgKsQ/
and here is a demo using jQuery's mouseup: http://jsfiddle.net/GgKsQ/1/
This is an orthodox code it gives you what you required.
please copy into your editor and check.
<!DOCTYPE html>
<html>
<body onmouseup="fun()">
The content of the body element is displayed in your browser.
<br/><br/><br/><br/><br/><br/><br/><br/>
<div id="Exclude" onmousedown="fun2()"> Exclude Me Please </div>
</body>
<script>
var idPressed = 0;
function fun() {
if (idPressed == 0)
console.log('Mouse released');
idPressed = 0;
//alert("Whatever "+this.id);
}
function fun2() {
idPressed = 1;
console.log('Mouse released 2');
//alert("Whatever 2"+this.id);
}
</script>
</html>
Related
I already have a jQuery .on() function in which click event is passed on a button.
I want to restrict user from clicking button more than 1 but i don't want to alter current function instead write new function
$('button').on('click', function() {
alert('hi');
});
$('button').click(function(event) {
var count = 0;
count = count + 1;
if (count > 1) {
event.preventDefault();
console.log('dont call alert');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>
I think you are looking for something like following.
$('button').on('click', function () {
alert('hi');
});
var isCliked = true;
$('button').click(function () {
$('button').off('click');
isCliked && $('button').click(function() {
console.log('dont call alert');
isCliked = false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Click Me !
</button>
JQuery off() method remove event handler of element. You can remove click event of button when it clicked. Using this work, button click event fired only once.
$("button").click(function(event){
alert();
$(this).off("click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>
You can use jQuery .one() method:
$('button').one('click', function() {
alert('hi');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click Me !</button>
I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}
I have this simple javascript function:
<script type="text/javascript">
var popup = '0';
if(popup == '0') {
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
popup = '1';
});
});
}
</script>
<button class="button">Test</button>
I want the function to alert only on the first click but it keeps working although I changed the value of popup to 1
What you need is .one() function. It makes sure the code is triggered only once for you.
Docs: http://api.jquery.com/one/
Docs example:
$( "#foo" ).one( "click", function() {
alert( "This will be displayed only once." );
});
Write the code as follows:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
popup = '1';
}
});
});
</script>
Once your click listener is set, your previous if statement's location wasn't executed anymore. Only the code inside the on click function.
Alternatively, you can unbind the onClick listener instead of setting popup = '1'. Try the following:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
alert('test');
//unbinds *all* listeners previously registered on "document"
$(document).unbind('click');
});
});
</script>
Much cleaner, and as Mathletics has mentioned, cleans unnecessary callbacks from memory.
Try:
<script type="text/javascript">
var popup = '0';
$(document).ready(function () {
$(document).on('click', '.button', function(){
if(popup == '0') {
alert('test');
}
popup = '1';
});
});
</script>
You had a function that was setting popup to 1 but was never checking its value again. This way it gets checked and should work properly.
How would I create a Toggle button with snap.js found here https://github.com/jakiestfu/Snap.js the usage section is very brief and I don't understand. Here is some code I came up with. I am new to javascript and any help is appreciated.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>
You need to get the button element before adding click listener on it. Also, markup for id attribute is wrong on the button.
<script src="js/snap.min.js"></script>
<script>
var snapper = new Snap({
element: document.getElementById('content')
});
// Get the button
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
</script>
</head>
<body>
<button id="myToggleButton">Menu</button>
<div id="content">
This is a menu
</div>
EDIT: Updated the answer to use document.getElementById rather than jQuery.
It looks like there's an error in your JavaScript (unless you've omitted some code.)
var snapper = new Snap({
element: document.getElementById('content')
});
// you need to grab a reference to this node before you can add the event listener
var myToggleButton = document.getElementById('myToggleButton');
myToggleButton.addEventListener('click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
addEvent(document.getElementById('toggleButton'), 'click', function(){
if( snapper.state().state=="left" ){
snapper.close();
} else {
snapper.open('left');
}
});
I am trying to perform a simple animation on click of a link. I want that the link should get disabled after the 1st click and should be re-enabled only after the animation, that started as a result of the first call, completes.
HTML:
<a id="link" href="#">Click</a>
<div id="test" style="float:left;border:1px solid #000;width:100px;height:100px;">Test</div>
<div id="test2"></div>
jQuery:
$('#link').click(function(e){
$('#link').bind('click', disableLink);
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').unbind('click', disableLink);});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}
Fiddle: http://jsfiddle.net/uHR7a/2/
You can use anonymous function where you declare a variable in_process and depends on it start new animation or not.
Demo: http://jsfiddle.net/dUarG/1/
(function () {
var in_process = false;
$('#link').click(function (e) {
e.preventDefault();
if (!in_process) {
in_process = true;
$('#test').animate({height: '+=50'}, 2000, function () {
in_process = false;
});
}
});
})();
use this code as you jquery:
$('#link').click(function(e){
$('#link').removeAttr('href');
ht = $('#test').height();
$('#test').animate({height:'+=50'},5000,function(){$('#link').attr('href', '#')});
$('#test2').html(ht);
});
function disableLink(e) {
e.preventDefault();
return false;
}
You can use on() and off() for this:
$('#link').on('click', anim); //bind click
function anim(e) {
$(e.target).off('click'); //unbind click when animating
ht = $('#test').height();
$('#test').animate({
height: '+=50'
}, 5000, function() {
$(e.target).on('click', anim); //rebind when done
});
$('#test2').html(ht);
}
FIDDLE