AddEventListener to current target - javascript

i'm trying to add some mouse movement to a background image within elements in a grid -
this is my HTML, its repeated multiple times:
<div class="pure-u-1-3 grid-item" >
<div class="bg-img" style="background:url('images/blog/network.png'"></div>
<div class="blogInner" >
<p>SOME TEXT</p>
Read More
</div>
</div>
the following code works - but moves all elements -
const bg = document.querySelector('.bg-img');
const bgIn = document.querySelector('.blogInner');
const windowWidth = window.innerWidth / 5;
const windowHeight = window.innerHeight / 5 ;
bgIn.addEventListener('mousemove', (e) => {
const mouseX = e.clientX / windowWidth;
const mouseY = e.clientY / windowHeight;
bg.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`;
});
I have tried to make the above code rso that it runs only on the hovered item as follows -
$('.grid-item').mouseover(function(event) {
const thisitem = $(event.currentTarget);
const bg = $(event.currentTarget).find('.bg-img');
const bgIn = $(event.currentTarget).find('.blogInner');
const windowWidth = window.innerWidth / 5;
const windowHeight = window.innerHeight / 5 ;
bgIn.addEventListener('mousemove', (e) => {
const mouseX = e.clientX / windowWidth;
const mouseY = e.clientY / windowHeight;
bg.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`;
});
});
on hover i get the error:
bgIn.removeEventListener is not a function
I'm completely stumped - as the same code oustide the hover function works fine - can anyone help me understand whats going wrong please?

If you just use jquery events it should work rather than mixing native js with jquery.
bgIn.mousemove((e) => {
const mouseX = e.clientX / windowWidth;
const mouseY = e.clientY / windowHeight;
bg.css({transform: `translate3d(-${mouseX}%, -${mouseY}%, 0)`});
});

Related

Convert jQuery to JavaScript - mousemove

I am trying to convert this jQuery Code into Vanilla JavaScript code. I'm having trouble with some of the methods. I think I have some of them, but some of them not.
Jquery:
jQuery('.image').click(function() {
jQuery(this).toggleClass('normal-zoom zoom-in');
});
jQuery('.image').on('mousemove', function(event) {
var bbox = event.target.getBoundingClientRect();
var mouseX = event.clientX - bbox.left;
var mouseY = event.clientY - bbox.top;
var xPercent = (mouseX / bbox.width) * 100;
var yPercent = (mouseY / bbox.height) * 100;
jQuery(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );
});
jQuery('.image').on('mouseenter', function() {
jQuery(this).addClass('zoom-in');
jQuery(this).removeClass('normal-zoom');
});
jQuery('.image').on('mouseleave', function() {
jQuery(this).addClass('normal-zoom');
jQuery(this).removeClass('zoom-in');
});
I tried.
Javascript:
document.querySelector('.image').onclick = function() {
document.querySelector(this).classList.toggle('normal-zoom zoom-in');
};
document.querySelector('.image').addEventListener('mousemove', function(event) {
var bbox = event.target.getBoundingClientRect();
var mouseX = event.clientX - bbox.left;
var mouseY = event.clientY - bbox.top;
var xPercent = (mouseX / bbox.width) * 100;
var yPercent = (mouseY / bbox.height) * 100;
document.querySelector(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );
});
document.querySelector('.image').addEventListener('mouseenter', function() {
document.querySelector(this).classList.add('zoom-in');
document.querySelector(this).classList.remove('normal-zoom');
});
document.querySelector('.image').addEventListener('mouseleave', function() {
document.querySelector(this).classList.add('normal-zoom');
document.querySelector(this).classList.remove('zoom-in');
});
Where is the error?
I have added two comments to the code to show two lines I fixed and why they needed fixing.
Additionally, I replaced every instance of document.querySelector(this) with document.querySelector('.image'), because the callbacks inside .onclick and .addEventListener do not bind this to the selected element the same way JQuery does, so you need to re-select the element each time. In your code, this is referencing the callback function, which is not what you want.
document.querySelector('.image').onclick = function() {
document.querySelector('.image').classList.toggle('zoom-in');// I split this line into two lines, because `.toggle()` can only accept one classname at a time.
document.querySelector('.image').classList.toggle('normal-zoom');
};
document.querySelector('.image').addEventListener('mousemove', function(event) {
var bbox = event.target.getBoundingClientRect();
var mouseX = event.clientX - bbox.left;
var mouseY = event.clientY - bbox.top;
var xPercent = (mouseX / bbox.width) * 100;
var yPercent = (mouseY / bbox.height) * 100;
document.querySelector('.image').style.transformOrigin = xPercent+'% ' + yPercent+'%';// There is no such `.css()` method on DOM nodes. Instead, set an element's css by using the `style` property.
});
document.querySelector('.image').addEventListener('mouseenter', function() {
document.querySelector('.image').classList.add('zoom-in');
document.querySelector('.image').classList.remove('normal-zoom');
});
document.querySelector('.image').addEventListener('mouseleave', function() {
document.querySelector('.image').classList.add('normal-zoom');
document.querySelector('.image').classList.remove('zoom-in');
});
I would recommend using this code instead though, as it's cleaner, easier to read, implements DRY practices, and works to prevent bugs related to changes in the DOM.
const imageElement = document.querySelector('.image');
imageElement.addEventListener('click', function() {
imageElement.classList.toggle('zoom-in');
imageElement.classList.toggle('normal-zoom');
};
imageElement.addEventListener('mousemove', function(event) {
const bbox = imageElement.getBoundingClientRect();
const mouseX = event.clientX - bbox.left;
const mouseY = event.clientY - bbox.top;
const xPercent = (mouseX / bbox.width) * 100;
const yPercent = (mouseY / bbox.height) * 100;
imageElement.style.transformOrigin = xPercent+'% ' + yPercent+'%';
});
imageElement.addEventListener('mouseenter', function() {
imageElement.classList.add('zoom-in');
imageElement.classList.remove('normal-zoom');
});
imageElement.addEventListener('mouseleave', function() {
imageElement.classList.add('normal-zoom');
imageElement.classList.remove('zoom-in');
});

Can't update my mouse position, because of my horizontal scroll (LocomotiveScroll)

I'm trying to make a custom cursor with the Ink Cursor by Ricardo Mendieta. https://codepen.io/mendieta/pen/WgvENJ
The cursor is working, but the problem I have is that I use a horizontal scroll with Locomotive Scroll. When I scroll, the mouse position doesn't get updated. I tried to fix this with a mousewheel function. I can console log the mousewheel event, but it doesn't update my mouse position.
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mousewheel', onMouseScroll);
const onMouseMove = (event) => {
mousePosition.x = event.clientX - width / 2;
mousePosition.y = event.clientY - width / 2;
resetIdleTimer();
};
const onMouseScroll = (event) => {
console.log(event);
mousePosition.x = event.clientX - width / 2;
mousePosition.y = event.clientY - width / 2;
resetIdleTimer();
};
const render = (timestamp) => {
const delta = timestamp - lastFrame;
positionCursor(delta);
lastFrame = timestamp;
requestAnimationFrame(render);
};
const positionCursor = (delta) => {
let x = mousePosition.x;
let y = mousePosition.y;
dots.forEach((dot, index, dots) => {
let nextDot = dots[index + 1] || dots[0];
dot.x = x;
dot.y = y;
dot.draw(delta);
if (!idle || index <= sineDots) {
const dx = (nextDot.x - dot.x) * 0.35;
const dy = (nextDot.y - dot.y) * 0.35;
x += dx;
y += dy;
}
});
};
Is there a way I can update the mouse position when I scroll when the scroll direction is horizontal.
I just figured this out for my situation, which I think is similar to yours. Not sure if this will help or not - hopefully it does.
scroll.on('scroll', (instance) => {
let customCursor = document.querySelector(".customCursor");
let scrollPx = instance.scroll.x + "px";
customCursor.style.left = scrollPx;
});
So instead of trying to reconfigure where the mouse position is, I'm simply updating the "left" attribute of the custom cursor to be in sync with how much the horizontally laid out Locomotive scroll container is being scrolled.

On each mousemove, the draggable element positioning is getting reset to zero

I'm working on a component that moves a parts diagram around in a container. Right now everything works great on the first mousemove, but on the second the positioning styles are getting reset to zero.
I re-wrote the code outside of Vue and also made a codepen for your viewing.
Codepen: https://codepen.io/paytonburd/pen/WKqEjo
Code:
let diagram = document.getElementById('diagram')
let diagramImg = document.getElementById('diagram-image')
let startX;
let startY;
let walkX;
let walkY;
let dragging = false;
diagram.addEventListener('mousedown', (e) => {
dragging = true;
startX = e.pageX - diagram.offsetLeft;
startY = e.pageY - diagram.offsetTop;
})
diagram.addEventListener('mousemove', (e) => {
if (!dragging) return;
e.preventDefault();
let x = e.pageX - diagram.offsetLeft;
let y = e.pageY - diagram.offsetTop;
walkX = x - startX
walkY = y - startY
console.log(walkX, walkY)
diagramImg.style.top = walkY + 'px'
diagramImg.style.left = walkX + 'px'
})
diagram.addEventListener('mouseleave', () => {
dragging = false;
})
diagram.addEventListener('mouseup', () => {
dragging = false;
})
When you mouse down, you always set the startX and startY relative to the position of the diagram, which is always at 0, 0 and never moves.
I think what you want is to instead set them to relative to the current position of the diagram image instead:
let diagram = document.getElementById('diagram')
let diagramImg = document.getElementById('diagram-image')
let startX;
let startY;
let walkX;
let walkY;
let dragging = false;
diagram.addEventListener('mousedown', (e) => {
dragging = true;
//This is where it went wrong
startX = e.pageX - diagramImg.offsetLeft;
startY = e.pageY - diagramImg.offsetTop;
})
diagram.addEventListener('mousemove', (e) => {
if (!dragging) return;
e.preventDefault();
let x = e.pageX - diagram.offsetLeft;
let y = e.pageY - diagram.offsetTop;
walkX = x - startX
walkY = y - startY
console.log(walkX, walkY)
diagramImg.style.top = walkY + 'px'
diagramImg.style.left = walkX + 'px'
})
diagram.addEventListener('mouseleave', () => {
dragging = false;
})
diagram.addEventListener('mouseup', () => {
dragging = false;
})
https://codepen.io/anon/pen/yqdzyq?editors=1111

select specific area of a div

I made a carousel using 2 divs named "left" and "right" putting mousemove events on them. I wanted to make it go up and down as well so I created a "top" and "bottom" and noticed that I couldn't make them combine to go the way the cursor goes.
I thus thought of targeting a specific area in the container (i.e top half of my container div) instead of creating divs inside triggering a specific direction, this way (I think) I can trigger all these event altogether. However after now hours of research I couldn't find a way to do so.
How should I proceed ? here is the code : http://jsfiddle.net/pool4/vL5g3/3/
var x=0,
y=0,
rateX=0,
rateY=0,
maxspeed=10;
var backdrop = $('.backdrop');
$('.directionx', backdrop).mousemove(function(e){
var $this = $(this);
var left = $this.is('.left');
var right = $this.is('.right');
if (left){
var w = $this.width();
rateX = (w - e.pageX - $this.offset().left + 1)/w;
}
else if (right){
var w = $this.width();
rateX = -(e.pageX - $this.offset().left + 1)/w;
}
});
$('.directiony', backdrop).mousemove(function(e){
var $this = $(this);
var top = $this.is('.top');
var bottom = $this.is('.bottom');
if (top){
var h = $this.height();
rateY = (h - e.pageY - $this.offset().top + 1)/h;
}
else if (bottom) {
var h = $this.height();
rateY = -(e.pageY - $this.offset().top + 1)/h;
}
});
backdrop.hover(
function(){
var scroller = setInterval( moveBackdrop, 30 );
$(this).data('scroller', scroller);
},
function(){
var scroller = $(this).data('scroller');
clearInterval( scroller );
}
);
function moveBackdrop(){
x += maxspeed * rateX;
y += maxspeed * rateY;
var newpos = x+'px '+y+'px';
backdrop.css('background-position',newpos);
}
Your problem is that the divs that control movement up and down are placed over the ones that control left and right, so the latter do not receive the mousemove event ever. Mouse events do not propagate through layers, even if they're transparent. I changed your code and CSS, so each div is in one of the corners. To make things easier, I've used data-* attributes so the direction controlled by each div is set in a declarative way, without the need to change the code. You'll see that the code is much simpler (and it could be simplified even more).
By the way, you could achieve this witout extra divs, just controlling where the cursor is (to the top, right, left or bottom of the center of the div).
backdrop.on('mousemove', '.dir', function(e){
var $this = $(this);
var direction = $(e.target).attr('data-direction');
var left = direction.indexOf('left') > - 1;
var right = direction.indexOf('right') > - 1;
var top = direction.indexOf('up') > - 1;
var bottom = direction.indexOf('down') > - 1;
if (left){
var w = $this.width();
rateX = (w - e.pageX - $this.offset().left + 1)/w;
}
else if (right){
var w = $this.width();
rateX = -(e.pageX - $this.offset().left + 1)/w;
}
if (top){
var h = $this.height();
rateY = (h - e.pageY - $this.offset().top + 1)/h;
}
else if (bottom) {
var h = $this.height();
rateY = -(e.pageY - $this.offset().top + 1)/h;
}
});
I've updated your fiddle.
EDIT In this new fiddle I do it without extra divs:
var w = backdrop.width() / 2;
var h = backdrop.height() / 2;
var center = {
x: backdrop.offset().left + backdrop.width() / 2,
y: backdrop.offset().top + backdrop.height() / 2
};
backdrop.on('mousemove', function(e){
var offsetX = e.pageX - center.x;
var offsetY = e.pageY - center.y;
rateX = -offsetX / w;
rateY = -offsetY / h;
});
backdrop.hover(
function(){
var scroller = $(this).data('scroller');
if (!scroller) {
scroller = setInterval( moveBackdrop, 30 );
$(this).data('scroller', scroller);
}
},
function(){
var scroller = $(this).data('scroller');
if (scroller) {
clearInterval( scroller );
$(this).data('scroller', null);
}
}
);
As you see, the mousmove handler is considerably simpler.
To avoid issue of children losing event could use just the one.
First HTML from 4 child divs to just one
<div class="backdrop">
<div class="direction"></div>
</div>
<div id="pos"></div>
Next Inside the mousemove find your relative position
//Get Relative Position
var relX = e.pageX - $this.offset().left;
var relY = e.pageY - $this.offset().top;
Get Relative Position as a percentage of width and put 50% of it in negative for direction
var w = $this.width();
rateX = ((relX / w) - 0.5) * -1;
var h = $this.height();
rateY = ((relY / h) - 0.5) * -1;
Fiddle

This javascript fails on mouseover

can anyone figure out why this JavaScript won't work? It correctly generates the document.write output, but when you try to drag it it starts complaining about top and left not being set. any idea whats wrong?
abilitynames=new Array('Heal','Slash','Stab','Poison Slash','Knockout','','','','Tornado','','','','','','','','Icespike','','','','','','','','Bolt','Jumping Bolt','','','','','','','Roast','Burn','','','','','','','Earthquake','Rockwall','','','','','','','Kill','Deflect','Anti-Heal','','','','','','Backslash','Darkwall','Steal','Take','','','','');
abilitytypes=new Array(3,1,1,1,1,2,2,2,1,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,1,1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,1,2,3,2,2,2,2,2,1,2,3,3,2,2,2,2);
abilitycolors=new Array('#00FF00','#FFFFFF','#0000FF','#FFFF00','#FF0000','#AD6C00','#AD00FF','#000000');
for(i=0;i<64;i++){
document.write("<div onmousedown='dragging=this.id;this.style.position=\"fixed\";this.style.zIndex=1000;this.style.left=event.clientX-75;this.style.top=event.clientY-15;' onmouseout='if(dragging===this.id){this.style.left=event.clientX-75;this.style.top=event.clientY-15;}' onmousemove='if(dragging===this.id){this.style.left=event.clientX-75;this.style.top=event.clientY-15;}' onmouseup='dragging=false;if(event.clientX<450||event.clientY>"+(180+(abilitytypes[i]*90))+"||event.clientY<"+(100+((abilitytypes[i]-1)*(90*abilitytypes[i])/((4%abilitytypes[i])+1)))+"){this.style.position=\"relative\";this.style.top=0;this.style.left=0;this.style.zIndex=0;}else{this.style.left=460;this.style.top=(Math.round((event.clientY-30)/45)*45)+15;if(abilitys[Math.round((event.clientY-120)/45)]!=\"\"&&abilitys[Math.round((event.clientY-120)/45)]!=this.id){document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.position=\"relative\";document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.left=0;document.getElementById(abilitys[Math.round((event.clientY-120)/45)]).style.top=0;}abilitys[Math.round((event.clientY-120)/45)]=this.id;alert(abilitys);}' id='"+i+"' class='abilityblock"+abilitytypes[i]+"'><div class='abilityicon' style='background-position:"+(Math.floor(i/8)*-20)+"px "+((i%8)*-20)+"px;'></div><div class='abilityname' style='color:"+abilitycolors[Math.floor(i/8)]+";'>"+abilitynames[i]+"</div></div>");
}
I've probably broken the script just TRYING to clean up this unholy mess and simplifying things a little, but at least it seems to be a bit more readable now (not including the array definitions):
<script type="text/javascript">
var dragging;
function mouseDown(el) {
dragging = el.id;
el.style.position = "fixed";
el.style.zIndex = 1000;
el.style.left = event.clientX - 75;
el.style.top = event.clientY-15;
}
function mouseOut(el) {
if (dragging === el.id) {
el.style.left = event.clientX - 75;
el.style.top = event.clientY - 15;
}
}
function mouseMove(el) {
if (dragging === el.id) {
el.style.left = event.clientX - 75;
el.style.top = event.clientY - 15;
}
}
function mouseUp(el, i) {
dragging = false;
if ( (event.clientX < 450) ||
(event.clientY > (180 + (abilitytypes[i] * 90)) ) ||
(event.clientY < (100 + (abilitytypes[i] - 1) * (90 * abilitytypes[i]) / ((4 % abilitytypes[i]) + 1)))) {
el.style.position = "relative";
el.style.top = 0;
el.style.left = 0;
el.style.zIndex = 0;
} else {
el.style.left = 460;
el.style.top = (Math.round((event.clientY - 30) / 45) * 45) + 15;
if ((abilitys[Math.round((event.clientY - 120) / 45)] != "") && (abilitys[Math.round((event.clientY - 120) / 45)] != el.id)) {
var subel = document.getElementById(abilitys[Math.round((event.clientY-120)/45)]);
subel.style.position="relative";
subel.style.left=0;
subel.style.top=0;
}
abilitys[Math.round((event.clientY - 120) / 45)] = el.id;
alert(abilitys);
}
}
for(var i = 0; i < 64; i++){
document.write("
<div onmousedown='mouseDown(this);'
onmouseout='mouseOut(this);'
onmousemove='mouseMove(el);'
onmouseup='mouseUp(this, i);'
id='"+i+"'
class='abilityblock"+abilitytypes[i]+"'>
<div class='abilityicon' style='background-position:"+(Math.floor(i/8)*-20)+"px "+((i%8)*-20)+"px;'></div>
<div class='abilityname' style='color:"+abilitycolors[Math.floor(i/8)]+";'>"+abilitynames[i]+"</div>
</div>");
}
</script>
Phew. And after all that, I'm guessing your missing 'left' and 'top' parameters are because your dynamically computed element IDs are generating non-existent IDs in the mouseup handler.
My suggestion? Scrap this home-brew drag 'n drop stuff and use the functionality provided by Mootools or jQuery. Far less trouble, especially when having to deal with cross-browser differences.
Searching your code, you haven't defined an onmouseover event. You define onmousedown, onmouseout, onmousemove, and onmouseup. No onmouseover.

Categories