I am trying to trigger a click event on a <canvas> element using jQuery. My code is simple: find the correct canvas element and then call .click().
For example: $("canvas").eq(0).click();
However, the programmatic click does not produce any activity, such as how a manual mouse click does on this specific <canvas> element. I have no information about how the canvas was drawn (obfuscated JavaScript). Does getting the <canvas> element to respond to .click() require knowing which event listeners are tied to the content in the canvas?
EDIT: More concretely, I am trying to invoke a click event on the waveform <canvas> element on SoundCloud. When clicked manually, the sound seeks to the position indicated by the mouse click. I cannot reproduce this click onto the element programmatically.
Related
My page has two overlapping elements: a body that displays a DWG file, and a canvas that's only displayed when the user selects a specific option and covers the entire body.
When the canvas is hidden away, the user can drag the file by clicking, holding and dragging, but when the canvas is placed over it, the option is unavailable.
I need a way to click into the canvas and drag the underlying body. So far, I've added a mousedown function that hides the div and a mouseup function that brings it back, and both are functioning as intended. However, I'm yet to find a way to "bleed" this click through to the body to make it movable as mousedown still "sees" the click into the canvas. Displaying the canvas, or moving it while the body is being moved, is not required.
I've tried using the "FireEvent" method described this question with both "click" and "mousedown" events to no avail.
If I've understood the question right, you can use the pointer-events: none CSS property to click through an element.
See this Codepen to see pointer-events: none in action: https://codepen.io/trustedtomato/pen/bGdVvwX
How can activate the drag -and-drop feature inside the canvas tag ?
As far as I know, there is no built-in drag and drop within a canvas, because a canvas is a literal context that you draw things on. Canvas-based games constantly refresh and redraw all elements.
Basically, a canvas requires a lot of manual, fine-tuned assembly of colors, though it can be performant under circumstances where you want that type of manual, decided control
When a user clicks on an object that seems to be within your canvas, you have to calculate where that mouse event's X and Y coordinates would fall, and determine which actions can be performed onclick on whichever thing is drawn there.
Normal DOM (not so in a canvas or iframe) will emit an event from the element you clicked, and will bubble up through all parent elements saying that some target element was clicked, and this fired event will have lots of data about that click event
A canvas is kinda like having a real painting: rather than an assembly of objects, there is nothing to drag, just a bunch of data about which pixels are which colors.
Normally, HTML elements have an attribute [draggable], but you would still need to manually reposition the element on mouseup or whatever, based off of the screen, or closest non-staticly placed parent. This question might be helpful: HTML5 Canvas Drag and Drop Item
You should search around instead of asking a question like this, in my opinion
I am making a javascript game and I would like to be able to add a main menu but I don't know exactley how. I am lookign up for a way to make filltext() clickable but to no avail. I have looked it up but have found no answer that suites my needs. The games protoype can be viewed here: sketchy.idreesinc.com . Does anyone know anyway to implement this? I am using javacript and HTML5's canvas element but I would prefer javascript. Thanks!
Things to know about HTML and canvas first
DOM
HTML elements are part of the DOM (the Document Object Model) which is the data structure of a webpage. DOM elements can have trigger events (like click) and event listeners react to those events.
browser
Your web browser converts the DOM elements into pixels on your screen. It also handles input and figures out what element's events to trigger if you click on the page.
canvas
The canvas element allows you to render bitmap images. You basically set the colors on a grid of pixels through some javascript calls to make pretty pictures.
what that all means
When you create a link element in HTML (the <a> tag) the browser renders the text and attaches a click listener to the element so the link actually works.
When you use javascript to draw the pixels on the canvas the browser's understanding of the DOM stops at the canvas. The browser knows about the DOM and the DOM knows about the canvas but it doesn't keep track of the individual items drawn in the canvas.
The answer
You can't actually attach an event to the text in the canvas but there are many ways to get the desired behavior of click the text, something happens.
One way would be to attach a click event to the canvas but instead of a simple event listener that always runs this event listener would need to check to see if the click happened on the text or somewhere else on the canvas.
Event listener functions get called with an Event argument which has information about the event.
Things to google
Some quick reading about these should get you started towards a working menu.
registering javascript event listeners
javascript event mouse coordinates
I have several pages that are all very similar. They have some javascript rollover links (images are preloaded, then there is a onMouseOver event that calls an image swap function and finally, there is a onMouseOut event that restores the original image).
When the user clicks on a rollover link that points to another page that has a rollover link on the exact same position, the image on the new page would be expected to load on the "over" state. This is not the case in Chrome and Safari (IE and Firefox work as expected).
So... On page load, is there a way to check if the mouse is already hovering the image to swap it right away? Something like "OnMouseAlreadyOver"?
Thank you.
If you using jQuery, it works without any problems!
http://jsfiddle.net/beuae
(not only for buttons, for divs also)
Actually, jQuery is a very good framework which assures everything goes as you expect, and cross-browser. This example confirms it.
The W3C standard says
onmouseover = script [CT]
The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements.
onmousemove = script [CT]
The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.
mouseover is fired on moving over the boundary of the object. mousemove happens when the mouse is already over the element.
You may need to use onmousemove (or even both).
You may need to actually do the calculation based on the element position and the mouse cursor position.
//Get Mouse Position
document.onmousemove=getMouseCoordinates;
function getMouseCoordinates(event){
ev = event || window.event;
mouseX = ev.pageX;
mouseY = ev.pageY;
}
You can't without passing a variable to the other page or using cookies to track which was hovered (and that will fail over if people do change their mouse position)
In theory you could check the mouse position and the button position however there is no way to get the mouse position unless an event is triggered, so the mouse has to move and if it move the CSS :hover should get triggered.
It's a minor issue tho, I doubt most people are going to click a link, wait for the next page and then expect that link to be hovered and ready to click again (why wouldn't anyone one to keep clicking the same button unless it does different things)
From a UX point of view I wonder if webkit doesn't have the best approach here, why port the action of one page to another.
You can use document.getElementFromPoint(mouseX, mouseY) to get the element, but the only way to get the cursor's position is via an event. The problem is, the only events are clicks and mouse movements, which require user input from the beginning, which is what you're trying to avoid.
In short, no, it's not possible to do with JavaScript. You're left with using CSS.
I'm trying to build a little calendar app sort of like Google Calendar. I'm trying to create events with a click and drag functionality so that the events align to a grid. I'm trying to
tie the dragging to TD elements below the event DIV element, which works when moving downwards (lengthening the event), but it doesn't work moving upwards (shrinking the event).
What occurs is that the mouseenter event is fired for the event DIV element, but it is never fired for the underlying TD. If you try to resize the DIV by moving upwards on the side, it works because the TDs actually receive the mouseenter event.
Google Calendar and jQuery Week Calendar use the mousemove event, but the mousemove event is fired for every pixel, which seems a waste. Is there a way to write this without using the mousemove event?
Is it possible to put the DIV element behind the table and the TDs? If the table is somewhat transparent, the user would still be able to see the DIV, but would actually be firing events on the TDs. I tried to do this with z-index, but it didn't seem to actually work.
jsFiddle example code: http://jsfiddle.net/rockymeza/8SHpA/
It sounds like you're having a similar kind of issue that I had:
you want to fire event behind an element? The answer is CSS. Set pointer-events:none; to the parent.
I had made a test where I tried to (unsuccessfully) implement the same behavior on touch devices. You can check that at: http://www.hakoniemi.net/misc/pointer-events.html if it'd help you with your issue.