I am trying to click this button on this page https://froala.com/demo-editor-new/
It works fine if I click using my mouse, but it does not work when I run this code from the Chrome Dev Tools document.querySelector('#moreMisc-1').click()
Any idea what the problem could be here?
The click handler first checks if the event is a real user gesture and then shows the menu. It is achieved with event.isTrusted property:
https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted
Any javascript artificial dispatching of events generates events with isTrusted set to false. It is only true in genuine user actions.
Related
In my Rails site, I have an element that I want to act as a link when clicked by a mouse (e.g. on a desktop), but not when touched on a touch-screen device (because there is also a hover behavior).
My understanding is that the JQuery .click event should not get triggered on a touch.
My coffeescript for setting the click handler is simply
...
$(this).click ->
location.href = url
...
(where "this" is the element in question)
I know this code works, because the click action works with the mouse. To ensure that it doesn't get triggered on a touch device, I use the device emulation in Chrome's Developer Tools to emulate a touch. However, when I do this, the method still fires and follows the link.
Is this a problem with the Chrome emulation or with my code? I want to know whether it will behave this way on real touch devices.
edit: Same thing happens with Firefox, so I'm thinking it's my code...
I realized that touch events trigger click events as well, later on in the event chain. To get the functionality I wanted, I kept the .click handler, but added a .touchstart handler where I called event.preventDefault() to short-circuit the rest of the event chain. This way, the .click handler fires for mouse clicks, but not for touches.
I am working on an RTS game where you can select units and right click to make them go somewhere. You can also shift right click to queue up a list of points you would like the units to travel to.
In all browsers except FF this is working perfectly.
In Firefox however the shift right click triggers a context menu (right click without shift does not). I am handling the contextmenu event and calling preventDefault but that doesn't seem to do anything in FF when the shift button is held.
Is there any way to block this behavior in FF?
My game is here: https://mod.it/4plhXo3l and the code in question in in the RTSBoard.js file on line 36.
I managed to get this working in Firefox by setting event.shiftKey to false, then calling preventDefault(), and stopPropagation(), then returning false. I then set the document model's onclick event and ondblclick events to the same function you wound up using for yourself, plus the added setting of the shiftkey to false. I also had to do this for mouseup events, because clicking and dragging was also causing context menus to pop up.
I'm not sure it can be fully 100% disabled, but this looks to be about the closest you can get it.
Answering my own question. It appears that calling preventDefault and stopPropagation in the document.onclick event solves the issue.
See this reddit thread for more discussion: http://www.reddit.com/r/javascript/comments/1agoj8/is_it_possible_to_block_the_shift_right_click/
I had a problem of needing to do some stuff programmatically (in javascript) that was happening in a third party component after being triggered by some browser events (click, focus, ?). I didn't know the event type, the element that the event was bound to, or the proper parameters.
-Tried setting Chrome breakpoints on subtree modifications, but nothing worked.
-Tried checking for jQuery events, but data('events') didn't reveal anything useful- they must be using DOM events.
Shouldn't there be some way of recording/capturing/logging all the events in a browser and then checking them (or even playing them back)? That seems like the only way to find out what I want to find out.
Updated for 2021
You can do this in any Chromium-based browser (e.g. Brave, Dissenter, Edge, etc.):
Open the "Developer Tools" (F12 or Ctrl+Shift+I) from the Ellipsis (...) menu.
Go to the "Network" tab.
Click the little Record button at the left.
Refresh the page and/or perform actions to trigger desired events.
Refreshing will show you the sequence of load events, and you can also filter for AJAX, JS, and other types of events. Or you can set breakpoints in the Sources tab for certain user events that happen when you mouse-over stuff, etc.
In Chrome you can use monitorEvents() in the console of dev tools to record all the events that you would like to monitor triggered during your test.
When clicking a link in google chrome the focus event fails to fire. All other browsers fire the focus event for links.
Link
I do not want to attach the event onmousedown, but onfocus.
Anyone have an idea for a workaround.
EDIT:
I would definitely consider this a bug because all other focusable elements trigger focus on click.
Even non focusable elements with a tabindex trigger focus on click in google chrome.
<div tabindex="-1" onfocus="console.log('focus')">div</div>
I can't attach to both click and focus because then onclick, other browsers would call the function twice. I can't detect this functionality because it requires user
interaction, and I won't do user agent string detection, because well its wrong.
Using this html:
Link
Is they any way to invalidate the second onmousedown call to prevent the function being called twice in non google browsers.
EDIT 2:
After some further testing <input type=radio> also fails to call focus in google chrome.
Why in the world is google chrome like this, while Opera, IE and firefox are all okay. What is crazy is that the mobile webkit browser even triggers focus on links when I tried it on my Android device.
That actually works just fine, except that the focus event isn't triggered simply by clicking on the link (try tabbing and you'll see the event firing). I don't think it's a bug, why not just safe guard and use both?
One work around you could do to avoid the double focus events from popping on the working browsers while still getting the focus event to pop on Chrome, is to on a click event check whether anything has focus on the page, and if not, then trigger the focus event.
With jQuery it could be done like this:
$('a').click(function(e){
if(!$('*:focus').length) $(this).trigger('focus');
});
example: http://jsfiddle.net/niklasvh/qmcUt/
You can use small hack:
Link
I am working on a web app in which I want to have a different action happen to an element whether I left or right click on it.
So I first added a function to handle the click event with jQuery, and then added a second function to handle the oncontextmenu attribute of my element.
This is working well in Chrome & IE but causes a problem in Firefox: When I right click on an element, my function that handles the left click is surprisingly called, and then my function that handles the right click is called.
How can I make Firefox not call the left-click function when I right click?
Yeah, browsers traditionally send right-clicks to the onclick handler, with the event.which property set to 3 instead of 1. IE used oncontextmenu instead, then Firefox picked up oncontextmenu in addition to the usual onclick. To cater for the browsers you will have to catch both events — or find a plugin that will do it for you.
Note that even with this sorted out, you are still not guaranteed to get right click events or be able to disable the standard context menu. Because many web pages abused the ability, it is disablable in many browsers, and sometimes disabled by default (eg. in Opera). If your app provides right-click actions, always ensure there is an alternative way to bring them up.
My problem came from the fact that on one side I was using the insanely great jQuery live function for click and the oncontextmenu attribute on the other. (Using onclick and oncontextmenu was not a problem).
I've just modified my $.live("click"...) function by catching the event and not firing the rest when e.which is 3.
Problem solved!