When a use moves their mouse on a webpage, I want to track that. Then I want to unbind that listener so that mousemove no longer gets tracked. How can I do that? The code below does not seem to work.
var clearIdleInterval = function () {
console.dir('unbind');
clearInterval(this.idleInterval);
$(document).unbind('mousemove', clearIdleInterval.bind(this));
$(document).unbind('keypress', clearIdleInterval.bind(this));
};
$(document).bind('mousemove', clearIdleInterval.bind(this));
$(document).bind('keypress', clearIdleInterval.bind(this));
Use .unbind() to unbind events. As shown below.
Note: If you want to unbind mousemove event for specific elements, and avoid to affect other handlers, you can do that too. For example
$( "#foo" ).unbind( "mousemove.myEvents" );
It is documented really well here
Hope that was helpful.
$(document).bind('mousemove', function(e){
$(".test").html(`${e.clientX} , ${e.clientY}`)
});
function unBind(){
$(document).unbind( "mousemove" );
}
.test{
text-align: center;
vertical-align: middle;
line-height: 90px;
height : 200px;
width : 200px;
border : solid;
margin-top : 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button onclick="unBind()">Un Bind</button>
<div class="test"></div>
Related
There is a piece of code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Events Examples</title>
<style>
ul {
width: 200px;
height: 200px;
margin: 10px;
background-color: #ccc;
float: left;
}
.highlight {
background-color: red;
}
</style>
</head>
<body>
<ul id="list">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<script>
const ul = document.querySelector('#list');
ul.addEventListener('mouseover', highlight);
ul.addEventListener('mouseout', highlight);
function highlight(event) {
console.log(event.target);
event.target.classList.toggle('highlight');
}
</script>
</body>
</html>
When started, it looks like this:
What I expect from listeners. When I move the mouse over the grey zone of 'ul', then highlight() function should work. Well, it works fine. What I don't understand: when I move the mouse over 'li' elements, then highlight() works again for unknown reason. How can it be fixed?
I'm new to JS and I have not found the answer to the problem described.
If you're saying you only want to highlight the entire region, then use "mouseenter" and "mouseleave" instead, and this to reference the element.
Then there's no event bubbling issue to have to deal with.
const ul = document.querySelector('#list');
ul.addEventListener('mouseenter', highlight);
ul.addEventListener('mouseleave', highlight);
function highlight(event) {
this.classList.toggle('highlight');
}
ul {
width: 200px;
height: 200px;
margin: 10px;
background-color: #ccc;
float: left;
}
.highlight {
background-color: red;
}
<ul id="list">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Events always bubble up, but if you want to select the element that you actually added the listener to, use event.currentTarget instead of event.target.
function highlight(event) {
console.log(event.currentTarget);
event.currentTarget.classList.toggle('highlight');
}
Information on event bubbling: What is event bubbling and capturing?
If you want to be sure that the event only gets called on the element that you registered it on, you can check if target matches currentTarget.
If you mouseover one element contained within another, the "inner" element (in your case the <li> will fire a mouseover event, and this will "bubble" up to the element where you attached the listener. The target property on the event will be the inner element that triggered the event, not the one where you attached the listener.
Rather than target, use currentTarget, which indicates the element that you attached the listener to.
update As #Terminus points out, this could lead to multiple handlings of the event, since mousing over both the li and the ul will trigger mouseover events that get handled by the listener. The solution would then be to only run the code if the target is the currentTarget
if(event.target === event.currentTarget)
event.currentTarget.classList.toggle('highlight');
Intro
I am extending photoswipe with my own button & modal dialog, similar to built in share dialog.
I already made code that worked, but then followed these modifications to photoswipe:
https://github.com/dimsemenov/PhotoSwipe/issues/1209
Now it doesn't work anymore. Issue is that photoswipe's event handlers get called before mine, so it appears as if user clicked on photoswipe controls and photoswipe hides image, controls & everything and only my modal is visible.
Diagnostics
I have modified onControlsTap and onGlobalTap and my button click to log to console and I see they are fired in this order:
onControlsTap
onGlobalTap
Settings button click
Html on the other hand looks like this:
<div id="globalTapContainer">
<div id="controlTapContainer">
<button id="myButton"></button>
</div>
</div>
And events are registered using addEventListener(..., false)
Code
This is my code which binds to click event
$("#pswp__settings__dropdown_background, .pswp__button--settings")
.click(function(ev) {
console.log('Settings button click');
ev.stopPropagation();
toggleSettings();
});
This is photoswipe code that binds events.
_controls = framework.getChildByClass(pswp.scrollWrap, 'pswp__ui');
// ...
framework.bind(_controls, 'pswpTap click', _onControlsTap);
framework.bind(pswp.scrollWrap, 'pswpTap', ui.onGlobalTap);
var framework = {
// ...
bind: function(target, type, listener, unbind) {
var methodName = (unbind ? 'remove' : 'add') + 'EventListener';
type = type.split(' ');
for(var i = 0; i < type.length; i++) {
if(type[i]) {
target[methodName]( type[i], listener, false);
}
}
}
}
My button and modal are one of child nodes of pswp__ui.
Question
How is it possible that their events are called before mine when I have registered click event to a specific button?
What to do to make photoswipe events not fire when you click on my controls?
I'm not familiar with photoswipe, but its events use a custom event called pswpTap, not click. Presumably this fires when an element is tapped or when the mouse button is pressed. click events don't fire until the mouse button is released, so that would explain why their events are firing before yours.
Example:
$('#outerdiv').on('mousedown', function() {
console.log('outer mousedown');
});
$('#innerdiv').on('click', function() {
console.log('inner click');
});
#outerdiv {
width: 100px;
height: 100px;
background-color: blue;
}
#innerdiv {
width: 40px;
height: 40px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerdiv">
<div id="innerdiv"></div>
</div>
You should presumably be able to prevent this by having your element handle and cancel the mousedown event. You may also need to add an event handler for tap events if they work differently from mousedown (I'm not sure whether they are).
$('#outerdiv').on('mousedown', function() {
console.log('outer mousedown');
});
$('#innerdiv').on('mousedown', function(event) {
console.log('inner mousedown');
event.stopPropagation();
});
$('#innerdiv').on('click', function() {
console.log('inner click');
});
#outerdiv {
width: 100px;
height: 100px;
background-color: blue;
}
#innerdiv {
width: 40px;
height: 40px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerdiv">
<div id="innerdiv"></div>
</div>
I'm taking by first babysteps in jQuery and stumbled upon a problem I can't seem to get around.
I couldn't find an article that quite described what my problem was, so I would like to try to get an answer this way.
I don't understand why my objects keep behaving like their former class.
When I setup a hover action for a class, and change the class of the object by clicking, jQuery keeps doing the animation for the new class.
I used toggleClass() and removeClass/ addClasswithout any result:
https://jsfiddle.net/biest9160/f0na6sro/
var wide = function() {
$(this).animate({ 'width': '120px' }, 200);
}
var normal = function() {
$(this).animate({ 'width': '100px' }, 200);
}
$(document).ready(function() {
$('.class1').hover(wide, normal);
$('.class1').click(function() {
$(this).toggleClass('class1 class2');
})
})
div {
width: 100px;
height: 100px;
border: 1px solid #000;
margin: auto;
}
.class2 {
background: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>
I don't understand why the the hover action is triggered while the object has a new class.
Initialy you attach the event to the element with the class name. After the class is changed the event remains on the element.
To remove the event you can use .unbind. To remove .hover event you can check this answer.
A working example using .unbind to remove the event and after to reattach it will look like in the snippet (basically is toggle hover event):
var wide = function(){
$(this).animate({'width':'120px'},200);
}
var normal = function(){
$(this).animate({'width' : '100px'},200);
}
$(document).ready(function(){
$('.class1').hover(wide,normal);
$('.class1').click(function(event){
var $this = $(this);
$this.unbind('mouseenter mouseleave'); // remove hover
if( $this.hasClass('class2'))
{
$this.hover(wide, normal); // reattach hover
}
$this.toggleClass('class1 class2');
})
})
div{
width:100px;
height:100px;
border: 1px solid #000;
margin: auto;
}
.class2{
background: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="class1">box1</div>
<div id="box1" class="class1">box2</div>
<div id="box1" class="class1">box3</div>
<div id="box1" class="class1">box4</div>
Use .on() menthod to bind the event which will actually bind the event on the parent of the class.
Here is the example:
$(document).on("click", '.class1', function(){
$(this).toggleClass('class1 class2');
});
This will defiantly work...
I want to prevent custom event on parent when child is clicked. Note that I don't have access to the code of parent event. I've tried doing e.preventDefault() on the button itself but it doesn't help.
Is there any way of ignoring all parent events when something inside of it is clicked?
$(function(){
// Note that this is just an example, I don't have access to this code
// This is some custom event inside custom plugin
$('.container').on('click', function() {
alert('This should be alerted only if you click on green box');
});
$('.btn').on('click', function() {
// Here I want to make sure that *parent* events are not triggered.
alert('Button is triggered, green box should be not triggered');
});
});
.container {
width: 300px;
height: 200px;
background: green;
padding-top: 100px;
}
.btn {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="btn">Click Me</button>
</div>
Since you're using jQuery, you can use the event.stopPropagation() method. The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. You can see it in action here
$(document).ready(function () {
$("#button").click(function (event) {
alert("This is the button.");
// Comment the following to see the difference
event.stopPropagation();
});
$("#outerdiv").click(function (event) {
alert("This is the outer div.");
});
});
In this simple example, if you click on the button, the event is handled by its own handler and it won't bubble up the DOM hierarchy. You can add a very simple handler calling event.stopPropagation() on the button and it won't bubble up. No need to mess with the parent's JS.
So I have this simple HTML
<div class="song">
<img src="http://o.scdn.co/300/40e3ec60c92513f724f47ce71baad1e496627107">
</div>
And this simple jQuery
$(".song").on( "mouseenter", function() {
$(this).css( "background-color", "red" );
alert('bla');
});
And the event does not fire.
Although
$(".naujienuKategorija").on( "mouseenter", function() {
$(this).css( "background-color", "red" );
});
Works just fine on
<p class="naujienuKategorija">Apklausa</p>
Which is on the same page.
.song has the following css
.song {
padding-bottom: 12px;
margin-bottom: 15px;
border-bottom: 1px solid #E0E0E0;
overflow: hidden;
}
I am obviously missing something... obvious.
In order for an event to be bound to an element, the element has to be ready and found. A general way to do this is to put your event bindings inside of $(document).ready because it ensures original elements on the page can be accessed. So use this:
$(document).ready(function () {
$(".song").on( "mouseenter", function() {
$(this).css( "background-color", "red" );
alert('bla');
});
});
Another option is to put your event binding on the page at any time after the target elements, either immediately or right before the </body>. For example:
<div class="song"></div>
<div class="song></div>
<script type="text/javascript">
$(".song").on("mouseenter", function () {
});
</script>
It might've been working with the .naujienuKategorija elements because you were using the second method above, but weren't with the .song elements.