I placed the html5 canvas in the background using the following
style="position:fixed;top:0;left:0;z-index:-1;"
On my window.onload(), I am adding a mouse event listener to the canvas as follows
canvas.addEventListener('mousemove', onMouseMove, false)
but unfortunately my canvas is not receiving any mouse events. How do you propagate events down the z-axis? Is it possible to do it without using any external library(if exist)?
I tried searching for it but couldn't found anything relevant so far.
You want to "bubble" a mousemove event from a none-fixed element to a fixed element with different parents? I think you have to check and trigger for your own:
Build a wrapper for the none fixed element(s). This gets also a mousemove event listener. If the mousemove is over the fixed element (check clientX and clientY), trigger the mousemove event on the fixed element.
E.g. tested with firefox:
function onCanvasMouseMove(oEvent) {
console.log(oEvent);
}
// wrapper mousemove handler:
// if the mouse is over the canvas, trigger mousemove event on it.
function onWrapperMouseMove(oEvent) {
if (
oEvent.clientX <= oCanvas.offsetWidth
&& oEvent.clientY <= oCanvas.offsetHeight
) {
oEvent.stopPropagation();
var oNewEvent = document.createEvent("MouseEvents");
oNewEvent.initMouseEvent("mousemove", true, true, window, 0, oEvent.screenX, oEvent.screenY, oEvent.clientX, oEvent.clientY, false, false, false, false, 0, null);
oCanvas.dispatchEvent(oNewEvent);
}
}
var oCanvas;
window.onload = function() {
oCanvas = document.getElementById('canvas');
oCanvas.addEventListener('mousemove', onCanvasMouseMove, false);
// add mousemove listener to none-fixed wrapper
var oWrapper = document.getElementById('wrapper');
oWrapper.addEventListener('mousemove', onWrapperMouseMove, false);
};
Also see this example.
P.s.: bubbling is not the right word, it normaly means bubbling the event to the parent elements.
You could try setting the overlaid elements to pointer-events: none but this will only work in Firefox, Chrome and Safari. It might also cause you some issues if there are some elements and mouse events you do want to handle before they hit the canvas.
Related
I'm trying to create an interactive HTML5 animation with Adobe Animate and I'm having an issue with my event listeners not being added or removed properly.
My intention is for the animation to always be listening for a mousedown event. When that fires, I want to listen for both mousemove and mouseup events. An object on the canvas will move with the cursor as mousemove fires and, when mouseup fires, the event listeners for both mousemove and mouseup are removed. However, the event listeners seem to persist. I've provided my code below; any help would be appreciated!
var canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', drag.bind(this));
function drag(event) {
canvas.addEventListener('mousemove', dragging.bind(this));
canvas.addEventListener('mouseup', stopDragging.bind(this));
function dragging(event) {
/* DRAG PROGRAM LOGIC */
}
function stopDragging(event) {
canvas.removeEventListener('mousemove', null);
canvas.removeEventListener('mouseup', null);
}
}
How to trigger multiple mouse-click events on arbitrarily many HTML elements covering each other?
I know you can use pointer-events: none; to let your click pass through your elements, but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?
but what if I want to trigger the mouse-click event on an element AND the mouse-click event on arbitrarily many other elements beneath it?
Events bubble. Which means and event fired on an inner element, will also be received by the parent elements until the top most parent.
<div id="topmost">
<div id="second">
<p id="firstp"></p>
</div>
</div>
Assume you are using jquery. Below is how you would listen to click events from all elements below div.id="topmost".
Since the normal flow of events is for any click event (could be any other type of event) that is fired by any element with in the topmost div element will be bubbled to the outermost element, I only list to topmost click event and then check which element fired that event by checking the id of the target element. e.target will be the actual element that the click was performed on. You can either switch target.attr('id') or run it through if else conditions.
$(function () {
$("#topmost").on("click", function (e) {
e.preventDefault();
var target = $(e.target);
if(target.attr('id') === "idOfElement"){
// code to handle the event
}else{
});
A solution could be to track mouse move using :
$( document ).mousemove();
Store coordinates to a global variable then check its position when your element is clicked. That would give something like :
var mousePos = [0,0];
$( document ).mousemove(function( event ) {
mousePos[0] = event.pageX
mousePos[1] = event.pageY
});
$("#target").click(function(){
// Compare mouse coordinates and your items ones using offset, height and width
if(mousePos[0] > $('#target2').offset.left){
// Do whatever you are willing to do
}
});
I am using html5 drag and drop.
When I drag an image or link from any given webpage, the browser-window is recognizing the dragover event.
For example dragging an image over a browser tab, makes the browser switching the window. Same works for example with dragging links to bookmarks.
Now when I drag my custom draggable element, there is no reaction from the browser. Is there a way to change this behavior?
I don't understand what you want to achieve, but it seems that you want to make something happens when you move your custom element outside the document or the window.
You should try binding a handler with a dragleave or something like that. Here is an example from another question:
var dropTarget = $('.dropTarget'),
html = $('html'),
showDrag = false,
timeout = -1;
html.bind('dragenter', function () {
dropTarget.addClass('dragging');
showDrag = true;
});
html.bind('dragover', function(){
showDrag = true;
});
html.bind('dragleave', function (e) {
showDrag = false;
clearTimeout( timeout );
timeout = setTimeout( function(){
if( !showDrag ){ dropTarget.removeClass('dragging'); }
}, 200 );
});
I think that could work for you, but for further help you should extend your issue's description.
Also I ll leave some HTML5 drag and drop docs here
I have simple code to "draw" in canvas element:
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
window.addEventListener("mousemove", rys, false);
}
function rys(e){
var xPos = e.clientX;
var yPos = e.clientY;
canvas.fillStyle="#000";
canvas.beginPath();
canvas.arc(xPos-7,yPos-7,10,0,Math.PI*2,true);
canvas.closePath();
canvas.fill();
}
window.addEventListener("load", doFirst, false);
As you can see, the function is working only when the mouse is over the canvas element. Now i want to make it "draw" when the mouse is clicked (just like in paint). Can someone tell me how to do it (with code)?
Thx for help
You need to keep track of the current mouse button state (pressed or not pressed) independently of the mouse movements.
You can do this by attaching event handlers to the "mousedown" and "mouseup" events, similar to how you attached to the "mousemove" event.
In these event handlers, you could keep track of the current state of the first mouse button by updating a global variable indicating whether or not the button is currently pressed. Then, in your "mousemove" handler, you can check this global variable and determine whether or not to paint when the mouse is moved.
When using the "mouseup" and "mousedown" events, you may want to limit your handling to only when the first mouse button is pressed. You can do this by checking that the event property "button" is 0. Note, that you can check for other buttons and keep track of them, also.
You can see a working example of this here: http://jsfiddle.net/mQtKz/
So basically I am trying to make a banner that adds and removes a movie clip on ROLL_OVER and ROLL_OUT with a button. I have the movie clip created, and the button, and it works fine if I only use ROLL_OVER. As soon as I add an eventListener for ROLL_OUT, it loops the functions like crazy and the movie clip keeps flashing on and off. I know I am missing something simple, but I can't get my mind around what. Here's the code:
var MySmiles:smilesEvery=new smilesEvery();
buttonSmiles_btn.addEventListener(MouseEvent.ROLL_OVER, smiles, false, 0, true);
function smiles(myevent:MouseEvent):void {
this.addChild(MySmiles);
};
buttonSmiles_btn.addEventListener(MouseEvent.ROLL_OUT, smilesOUT, false, 0, true);
function smilesOUT(myevent:MouseEvent):void {
this.removeChild(MySmiles);
};
Any thoughts?
removing listeners might help:
var MySmiles:smilesEvery=new smilesEvery();
buttonSmiles_btn.addEventListener(MouseEvent.ROLL_OVER, smiles, false, 0, true);
buttonSmiles_btn.mouseChildren = false //to be shure, that one of the childs interfire with mouse events
function smiles(myevent:MouseEvent):void {
this.addChild(MySmiles);
buttonSmiles_btn.addEventListener(MouseEvent.ROLL_OUT, smilesOUT, false, 0, true);
};
function smilesOUT(myevent:MouseEvent):void {
buttonSmiles_btn.removeEventListener(MouseEvent.ROLL_OUT, smilesOUT, false,0,true);
this.removeChild(MySmiles);
};
My guess: on roll over you show a clip, that overlaps your button.
Hence, you get an immediate roll out on the button.
Which in turn causes your button to recieve roll over again.
That causes a recursive stack overflow. :)
If the above holds true, just disable mouse on MySmiles.
Both mouseChidren and mouseEnabled.