I would like to listen to a click event on a particular element and then dispatch it to a link element while keeping in mind if the meta key was hold or not.
For instance:
Let's say I have a table of elements. When the user clicks on a row I would like to follow a link, but I would like the link to be opened in a new tab if the user had his ⌘ /ctrl key pressed.
It seems simple but I found out this was tricky... (As I didn't succeed to do it!)
The DOM Event API already provides all you need, assuming you need only to remember the modifier keys from a legitimate user action.
When using addEventListener to catch an event, simply take the parameter, which is a DOMEvent instance, that is passed to your handler function, and resend it to your target element with dispatchEvent :)
Indeed, a DOMEvent instance encapsulates its source environment. More specifically here, a MouseEvent knows which keys were pressed when it was fired.
Demo: try clicking the link in this JSfiddle while holding down ⌘ (or ctrl if not on a Mac), for example.
For a complete reference, here is the used code:
var button = document.getElementById('source'),
target = document.getElementById('target');
function handler(evt) {
target.dispatchEvent(evt); // that's all the magic it takes
}
button.addEventListener(
'click', // listen to a click event
handler,
false // no capture, i.e. do not catch events before children
);
You may also find this complete reference on DOM events useful :)
Related
As said in the title, I am trying to customize the contextmenu event. The situation is this: I want to catch the event, preventing it from firing on some elements (I'm ok here, all good), then I want to call it targeting another element (this is not working). At first I just tried dispatching it by creating a custom event and using myTargetElement.dispatchEvent(), the custom element does fire, but context menu won't open.
The reason I need this is that I want to open the contenteditable context menu when the user clicks anywhere. I've tried something similar to the last example on this MDN page, and I logged the event type, it is firing. Here's some example code of what I'm doing.
HTML
<div id="prevent">This div will prevent default event behaviour.</div>
<div id="my-target" contenteditable>Fire here the event and open context menu</div>
For instance, I cannot put one div inside the other.
JS
function showMenu(){
const preventer = document.getElementById('prevent');
const myTarget = document.getElementById('my-target');
const myEvent = new Event('contextmenu', {
bubbles:false //I had to use this, as setting it true was logging an error on Firefox
});
myTarget.dispatchEvent(myEvent);
console.log(myEvent.type); //it does log the event name
}
The listener that prevents default is not important, as when I just run the showMenu() (even when removing every other bit of js) on console it still has not the intended effect. I'm also able to listen to the 'contextmenu' event when I add a listener and run showMenu().
I'm beginning to think that there is not a direct solution to this, but workarounds and ideas would be really appreciated.
So I'm modifying a webpage, it has a button, it is coded so mouseup goes to a link, I want to change this, adding mouseup functions don't work; mousedown works but I have to hold the mousedown for a second or two otherwise the original function still occurs.
var duma = $('input')[0].value;
var siq = $('.inline-nav-menu__link')[1];
$(siq).mousedown(function(){
window.location = 'https://www.google.com/search?q='+duma+'&sxsrf=APq-WBtOrInsFht_VAH6gWFlCceGK46ylQ:1649149133894&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjdvbqix_z2AhWtxzgGHW7GCh0Q_AUoAXoECAIQAw&biw=1366&bih=696&dpr=1';
})
This works but I have to keep the mouse held down for a lil bit
Changing that to mouseup doesn't work
I inspected the element further, it had an attribute named formAction which had the link to the respective page. Changing said attribute solved the first problem. But now the page is going to google web instead of images...
var duma = $('input')[0].value;
var siq = $('.inline-nav-menu__link')[1];
$(siq)[0].formAction='https://www.google.com/search?tbm=isch&q='+duma+'';
When you add an event listener, you're creating a function (that is a Javascript object) and binding it to a specific event.
To remove the listener, you have to pass to .removeEventListener() a reference to that same function.
Working with jQuery, there's also the element.off('event_type') method, but it works only on listeners previously attached with the jQuery .on('event_type') method.
If the listener refers to a named function you can do element.removeEventListener('event', functionName).
If the listener is an anonymous function I'd do one of these:
A) clone the element with jQuery clone() method, so that the cloned element will not have any event listeners attached anymore. Then you could attach your own listeners.
B) if you don't need the original event listener, you can also disable it doing like this:
function stopEvent(event) {
event.stopImmediatePropagation();
}
element.addEventListener('mouseup', stopEvent, true);
This way, using the true option in .addEventListener, you stop any event propagation at the beginning of the capturing phase, so the event itself will never reach its target (for that mouseup event only).
The cons of the second option is that you cannot use that event anymore on that element, as it will never reach the target.
But, as you used a named function to stop the propagation, you can now remove it with element.removeEventListener('mouseup', stopEvent, true) and bring back the original event listener to work again (because removing stopEvent, now the event propagates again to its target).
Figured it out. Needed to change form values.
Used the info on google search forms from link.
https://stackoverflow.com/a/65032682/10824788
var duma = $('input')[0].value;
var siq = $('.inline-nav-menu__link')[1];
var derka = 'https://www.google.com/search?tbm=isch&';
$(siq)[0].form[2].name="q";
$(siq)[0].form[2].value=duma;
$(siq)[0].form[4].name="tbm"
$(siq)[0].form[4].value="isch"
$(siq)[0].formAction=derka;
Some code that looks like the following is firing the click event via the Enter key, but is not responding to the mouse click.
//a is an anchor element
a.addEventListener('click', function (e)
{
//Do Stuff...
});
This page demonstrates the problem. The relevant bit of code is at line 176. This is in the middle of development and currently only (sort of) works in Chrome.
Also, I just verified that it works if I use mousedown, so it's not just the case of an invisible element sitting in front of the anchor.
Any ideas?
Edit: Now that you've shown us the actual code you're using, the problem is related to the fact that the autoSuggest() function has it's own click handler and in that click handler, it is clearing the container which removes all <a> elements in the container so your link object gets destroyed (probably before your click event gets to process). So, you can get events that happen before the click (like mousedown), but after a click, the element is removed from the DOM.
If you tell us what you're trying to actually do when an auto-suggest item is clicked that is different than the default behavior of the autoSuggest() function and you point to any documentation for that function, then perhaps we could offer a better way to solve your issue.
The link may be firing and taking you off to a new page (or reloading the current page), thus preventing you from seeing the click code run. Usually when you process a click event on a link element, you need to prevent the default behavior:
//a is an anchor element
a.addEventListener('click', function (e) {
e.preventDefault();
//Do Stuff...
});
Another possibility is that you are trying to install the event handler too soon either before the DOM has been loaded or before this particular link has been created and thus no actual click event handler is attached to the DOM object. You can verify whether the event handler is even getting called by temporarily putting an alert("Click handler called"); in the event handler and see if that pops up or not.
event.preventDefault() will override default event behavior of an element. How can I temporarily override all click bindings and not just default ones?
Or is there a way to save all the click bindings so I can unbind them and use them later?
Well this is not a proper answer but a workaround. We can push the required handler on top of the stack and then used return false to stop other bindings. https://github.com/private-face/jquery.bind-first
You can use jQuery.clone(true) what this does is return data for an element. The parameter that is set to true means to also copy over all the events as well.
So if you clone the element into a variable you can bring back the old click events by simply replacing your target element with its older clone (which has the old events)
So it goes as follows:
step 1:
clone the target element using jQuery.clone(true) into a variable
step 2:
remove all click events from the target element using jQuery.off('click')
step 3:
bind your event to the target element with jQuery.on('click' function etc...)
step 4:
when you're done replace the target element with its clone (which has the old events)
Here is a JSFiddle for your viewing pleasure
(Sorry for the simpleness of the JSFiddle I mocked it up quickly and I have no example situation where I would use this.)
EDIT: I forgot to explain jQuery.clone(true)
You may catch the click before it can bubble by using
element.addEventListener(type, listener[, useCapture]);
This way you can 'catch' the click before triggering the jQuery click handler, like this (which I took from this stackoverflow question:
document.addEventListener('click', function(e) {
e.stopPropagation();
}, true);
For more information (and some IE < 9 support), see developer.mozilla
Edit: details about useCapture from Mozilla:
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation. If not specified, useCapture defaults to false.
If you have control over all of the JS code and can bind your own handler first and all other event handlers are bound with jQuery then you can do this:
var overrideClick = false;
$("#yourElementId").click(function(e) {
if (overrideClick) {
e.stopImmediatePropagation();
// e.preventDefault(); uncomment this if you want to prevent default action too
}
});
Where some other part of your code would set overrideClick = true when needed.
Demo: http://jsfiddle.net/NCa5X/
jQuery calls handlers in the order they are bound, so you can then use event.stopImmediatePropagation() to prevent the other handlers from being called.
What I'm trying to do is: when the user presses a cancel button, or navigates away of the page through a link or a menu option, I check if there are unsaved changes. If so, I ask the user if he/she wants to save. I can't do this with a javascript confirm window because I sometimes have more than two options, so I can't "hold" everything until the user makes a selection like confirm would. So I though to "save" the event, cancel it's current execution, whait until user makes up his/her mind, then take the action needed according to their answer, then raise back the original event.
So, as a code example of what I thought:
I have this piece of code:
var executingEvent;
function someFunction() {
...
if(existUnsavedChanges) {
showConfirmMessage();
executingEvent = window.event;
if (executingEvent.stopPropagation) { executingEvent.stopPropagation(); } else { executingEvent.cancelBubble = true; }
...
}
}
Is there a way to later on do something like this?
raise (executingEvent);
Sounds a bit complex, I'd also welcome other options :)
to fire an event use
elem.dispatchEvent(event)
Where elem is either the element you bound to or below it in the DOM (so it bubbles up).
Of course if you already stopped propagation the event wont bubble up, so you may want to create a new event object instead.
var ev = document.createEvent("Event");
ev.initEvent(type, true, true);
ev.origEv = originalEvent;
elem.dispatchEvent(ev);
It sounds to me like you're overthinking it - you could just raise the same type of event as the original event (which you would have cancelled) once the user has taken the action that you prompted for.
You can work out what the original event raised was by inspecting properties on the event object e.g. the type of event, the original target, etc.