Twitter Timeline DOM Manipulation - Negating Onclick Event Handler - javascript

I am creating a browser extension that modifies the Twitter timeline by adding some links to each tweet row in a user's Twitter timeline.
Generally whenever the tweet row is clicked, Twitter will pop out the right-hand panel with more information, except for when the user clicks links like Retweet, Reply, etc. I'm not sure what Twitter's JavaScript is applying to these links to prevent them from causing the panel to be opened, but I'd like to do something similar. I have tried inspecting the elements in Google Chrome, but the event handlers are not revealed.
Any suggestions?

The event handlers are probably being added programmatically via script. You could try to remove the event handlers (see the docs), but it might be easier to clone the element in question, then hide the original. See cloneNode documentation for information.
Without any sample html, I can't really give you a good example, but here's a generic jsFiddle I threw together to demonstrate the concept: http://jsfiddle.net/sacCK/1/

I solved my problem by stopping the event propagation. This prevented the event from propagating to the event handler for the container element.
With jQuery I was able to apply an onclick handler like so:
$("#elementId").click(function(event) {
event.preventDefault();
event.stopPropagation();
// other actions
});

Related

Emulate physical click in Jquery or Javascript

I am trying to programmatically trigger a click on a wordpress page on a <a href="#"... tag which after clicked shows a div with all categories... (the div is not hidden it gets created after clicking the button)
When trying to find the click event behind this element on chrome debugger DOM in event listeners the only event attached
to this element is flatsome.js?ver=3.12.1:109
the handler is f(t) ............
using jQuery Audit, I can see the handler definition, then there are many functions like !function(t)... because it is minified.
I tried to use jQuery click, mouseup, mousedown events (also with trigger('click...') ) with no success, it gets the object, doesn't show an error, but never shows the filter menu.
Is there a way to just emulate the physical click as if it was done with the mouse? then I wouldn't need to call the function, I can't seem to find what function is behind the click event...
Thank you in advance
Dario
Have you tried the following code?
Using jQuery:
$('your-query-selector').trigger('click');
Using JavaScript:
document.querySelector('your-query-selector').click();

Stopping events to bubble up in DOM

I am writing a HTML editor, anyone can plug this plugin into their site and make use of it.
Plugin Usage
$(".editable").htmleditor();
Onclick on this elements I will change the element into contenteditable and my editor menu will be opened near the element like aloha editor.
Problem
Scenario 1
<div class='editable' onclick='loadUrl('https://facebook.com')'>
</div>
Scenario 2
<div class='editable' id='openNewWindow'></div>
<script>
$("#openNewWindow").click(function(e){
e.preventDefault();
e.stopPropagation();
});
</script>
Aforementioned scenarios I won't receive the event. It makes my plugin not reliable. I tried couple of solutions.
Solutions I tried
Removed all elements in a body and reinserted into it again to remove attached event handlers. It works but the UI is distorted while inserting in some sites.
Added onclick='return false' attribute in all elements. It works for some elements only.
How to unbind all attached event handlers and prevent the default event of an element?
In Scenario 1, the user of your plugin has both made an element editable, and also made clicking on it navigate away from the current page. That doesn't make much sense, but it's their business. In this situation they can't realistically expect your plugin to run.
In Scenario 2, you need to process the click event before it's handled elsewhere. Removing or suppressing existing handlers is not a good idea: it may make other parts of the page fail, and is annoying to your users in any case.
Instead, you can make your handler run in the event capture phase like this:
editableElement.addEventLister("click", myHandler, true); // note the "true"
Now your handler will run before all handlers added using JQuery (and most handlers that people add via any means), which run in the event bubble phase. Note that this technique only works in modern browsers (i.e., not IE < 9).
For reference: What is event bubbling and capturing?

Detect if CKEditor used a keyup event, or prevent its propagation

In short
Is there a way in which, when listening to a native event, I can detect if the event was somehow used by CKEditor before it propagated to my listener, or prevent it from propagating at all?
Use case
I'm listening to the keyup event using jQuery, to detect when escape is pressed. When it is, the user is prompted if they want to discard changes, and the CKEditor instance is destroyed and its element removed from the DOM.
$('body').on('keyup', function(e){
if(e.which==27){
CKEDITOR.instances.myDiv.destroy();
$('#myDiv').remove();
}
});
The problem here is that CKEditor allows the user to interact with certain UI elements using the escape key. For instance to close a dialog window or drop-down list.
So my event should only execute its code if CKEditor did not already use the event to close a UI element of its own.
Attempt
I tried to listen to the dialogShow and dialogHide events to detect if a dialog window is open, and my action should thus be ignored. This didn't work for two reasons:
CKEditor handles the event first, so by the time the event propagates to my listener, no dialog windows are open and my code is executed.
Even if it would work, it wouldn't for drop-down lists as they do not trigger the dialog* events.
Ideas
I don't know enough about the workings of CKEditor to come up with a solution, but I think I'm looking for something along the lines of:
A setting in CKEditor to prevent event propagation: CKEDITOR.instances[0].noEventPropagation = true
An indication in the original event object: if(event.CKEditorWasHere){/*do nothing*/}
A plugin providing functionality that I can use.
Worst case scenario: A setTimeout in the dialogHide event which I'll use to suppress my own events for a short time.
So
Maybe I'm completely overlooking something. This seems to me like a common problem which should have a simple solution.
Thanks for your time.

jQuery Chosen Plugin : Capturing focus to open when tabbing

We're currently using the Chosen Dropdown Plugin which is rather awesome, apart from one minor issue. When we're using a single dropdown, if you tab into the 'chosen' control, the actual dropdown portion is not shown. However, when applying the plugin to a multiple 'select', it does appear.
Having been through the documentation and GitHub issues, there seems to be a lot of mentions regarding tab ordering and focusing, but nothing that seemingly deals with this rather simple requirement; Display the dropdown when receiving focus when tabbing.
So assuming that this functionality is not part of the plugin, is there an alternative such as capturing the focus of the anchor tag?
$('.chzn-single').focus(function(e){
alert('I should be focused!')
});
So far, I haven't been successful and was wondering whether any others have experienced this issue. You can check out this jsfiddle that demonstrates the problem
You should keep track of focus event for the search input thats inside chosen conainer, not the anchor element, then trigger mousedown event for the chosen container - that's the event that it listens to when opening a dropdown
You need to use delegated events approach to bind event handler to elements added dynamically (for jquery 1.7.1 and earlier you may just use 'live' method)
You also need to check if the container is active currently, to avoid recursive calls (when chosen dropdown gets opened - search input will be focused again)
$('body').on('focus', '.chzn-container-single input', function() {
if (!$(this).closest('.chzn-container').hasClass('chzn-container-active'))
$(this).closest('.chzn-container').trigger('mousedown');
//or use this instead
//$('#select').trigger('liszt:open');
});
Here's working jsfiddle
Instead of $(this).closest('.chzn-container').trigger('mousedown');
you may also trigger plugin's internal event: $('#select').trigger('liszt:open');

Will JQuery override existing inline event handlers?

I have a site which is built out of many iframes.
I am working on monitoring user activity - like when user clicks or keydown.
This is only to see if user is idle or not.
For this, I am drilling down to all iframes,its div tags and registering hover and click events.
Meanwhile I dont want to override/break existing inline event handlers which are defined by the application.
Will jquery override exiting eventhandlers? If yes, how can check this to make sure I dont do this?
Here is my usage.
$(divElementObj).click( function() {
alert("div click");
});
No, jQuery works by using addEventListener/attachEvent. Inline and pre-existing handlers are not overwritten.
See jsFiddle example and the jQuery source to show how this is done.
As long as you don't use something like event.stopPropagation(); you should be fine. event.stopPropagation(); could cause issues if your existing site is expecting events to bubble.
There is a plugin for it, but you should only do this when you really need to.
jQuery Override Plugin
$(divElementObj).override('onclick', 'click', function(...));

Categories

Resources