I need to add a code snippet to an existing site (actually it's SharePoint site) with a button that starts a Javascript function on click event.
The problem is that SharePoint already has several click events attached to body element. Some of them fire before my function get executed and some of them after.
I need to make only my click event fire.
The function that starts after mine I manage to stopped by stopPropagation() function. But what can I do to stop functions that fire before my event?
I assume the idea is to somehow stop capturing from child element...
If you don't need the click events attached to body to trigger when you click on the button, you can add a check in the event handlers attached to body click and stop the execution of code if your button is the originator of that event.
if(event.target == document.getElementById("your_buton_id")){return;}
Related
Which event should I use for any kind of button activation:
keyboard return
mouse click
finger touch
Do I need to define three event handlers or can I do this with just one?
The question aims plain JavaScript without any library use.
And what happens, when W3C invents a new event, which recognizes fart sounds to activate a button? Do I have to add a fourth event handler?
It depends on what action you want after the event is done.If you have a submit button then use mouse events like:
onclick event - this activates whenever you click the left button on
your mouse
oncontextmenu - this is activated when the right
button of the mouse is clicked
Is it possible to prevent an event from reaching listener set at document.window with capturing enabled?
Context
I am working on a chrome extension where I add some dom element (including some input element) to the dom from content-script. In a page, there is an event listener attached to the document.window with capture enabled, that listener takes away focus form my input element on any keydown event. As a result my input element is basically not working. I need to prevent that event from reaching the listener at window somehow.
Say I listen for clicks on a button
btn.addEventListener("click", function(e) {
console.log("button clicked");
});
This now activates a click listener, and if the user clicks on my button, the click event will fire on my button and then propagate to all its parents (unless the bubbling is prevented). But what if the user clicks on a completely unrelated element? Will this cause the event to fire on that element and then propagate to all of its parents too or not? (Even though there is no interest in handling those click events)
My guess is that yes, it will, because there should be a listener for clicks on the entire window once I start listening for them on a specific element. But I am not sure.
From JavaScript Essentials by O'Reilly:
When an event happens, the browser checks to see if you've defined an
event handler for that event; if you have, that function is run. Once
the function is complete, the browser begins the event loop again.
This event loop continues as long as the web page is loaded.
This means that, every click method is handled by browser. However, if you there's no listener assigned, it does not go further. But at least, it knows when anything is clicked.
I am writing a chrome extension that accesses the active tab page and manipulates the DOM by injecting some code with a content script. However, I am having no luck when it comes to firing event handlers that should be registered by the active tab page's own JavaScript.
For example, on the web page itself there is a save button that saves all the form data when clicked. On my chrome extension, I have a button that, when clicked, sends a message to a content script. The content script then has a line of code to fire the web page save button's event handler to save the form data, but it does not work, even when I tell it to do so using $('#btnSave').click().
Another example, I have a button on my chrome extension that when clicked, selects a value from the drop down list located on the web page. It selects the value fine, but it does not fire the change event for the drop down list, even when I explicitly tell it to do so using $('#ddl').change().
Both commands fire the respective controls events fine when I type them in the console, but not when using them in my content script. So how do I access the web page's event handlers from my content script?
P.S. Have also tried invoking event handler using .trigger(event), .triggerHandler(event), .change() for select, and my code is wrapped inside $(document).ready().
Setting a value programatically does not fire the change event. Just like calling click() does not necessarily call all the handlers. You have to manually fire it. I would suggest you use the function at this answer since it's not jQuery specific.
Note that if you use the function mentioned, you can fire a click event and it will behave just as if a user clicked something. However, for the change event, you have to make the change programatically and then fire the change event
// Trigger a user click and the event
fireEvent($('#btnSave')[0], 'click');
// Make a change and fire a change event
var ddl = $('#ddl');
ddl.val('something');
fireEvent(ddl[0], 'change')
I have implemented the Swipe for Action Android pattern in my mobile web application (PhoneGap) using JavaScript & CSS animations/transitions.
However, there's one thing that's still eluding me.
I wish, that once the action menu is displayed fully and the user clicks anywhere outside of the action menu (labelled 3 in the figure), the menu should retract and the original item displayed (labelled 1 in the figure).
In a desktop application, one could "capture focus" and perform the transition back to (1) in lostfocus.
What is the JS equivalent of lostfocus event. I see an onfocus and onblur event, but from what I read it's really meant for things that need focus; like input, textarea, etc.
How else could I catch that event I'm interested in, other than putting some code in the touchend of every other element in the page and forcing the retraction of open actions explicitly?
I think you gave the answer yourself. focus and blur are the events to be used for this and they are not exclusively meant for input elements, as you can see here [1].
I'm even trigger the focus event manually in a layer use case: A layer opens and I want to capture the keypress of ESC to close the layer. For this I need to set the focus on the layer as my event handler would not fire otherwise.
To capture the click outside you just need to register for pointerUp or click events on an element that spans the whole screen (it must really cover the whole screen like the body element). Because of the event bubbling the handler will fire as long as nothing else captured and cancelled it.
[1] https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-blur