Is it possible for me waiting for a user to click a link, and upon clicking the link the link's text would be obtained?
Maybe by using onClick?
If you mean handling the click event for the links in the page that the user is browsing then this is how:
// handle the load event of the window
window.addEventListener("load",Listen,false);
function Listen()
{
gBrowser.addEventListener("DOMContentLoaded",DocumentLoaded,true);
}
// handle the document load event, this is fired whenever a document is loaded in the browser. Then attach an event listener for the click event
function DocumentLoaded(event) {
var doc = event.originalTarget;
doc.addEventListener("click",GetLinkText,true);
}
// handle the click event of the document and check if the clicked element is an anchor element.
function GetLinkText(event) {
if (event.target instanceof HTMLAnchorElement) {
alert(event.target.innerHTML);
}
}
This is very simple using jQuery:
<script>
$(document).ready(function(){
$("a").click(function(){alert($(this).text());});
});
</script>
Of course, you'll probably want to do something other than alert the text.
Related
I am trying to achieve the following functionality:
Once user has clicked on a button, I want to add click event listener to window element to alert a message (say).
Consider the below snippet for this purpose:
<button id="b1">click</button>
<script>
document.querySelector("#b1").addEventListener('click', () => {
window.addEventListener("click", () => {
alert("hello");
});
})
</script>
But, unfortunately, the above code also alerts message when the user initially clicks on button (which I don't want).
Any idea on how I can achieve the functionality?
It would be better to add the window click event listener and have a flag to determine if the alert should appear.
The problem with the method you are using is every time a user clicks the button you add a new event listener to the window. This will then stack up and fire multiple times for each click of the document.
To stop the button click from passing through to the document and also triggering the window event listener you can use the event stopPropagation() method as demonstrated below.
let hasButtonBeenClicked = false;
window.addEventListener("click", () => {
if(hasButtonBeenClicked) {
alert("hello");
hasButtonBeenClicked = false;
}
});
document.querySelector("#b1").addEventListener('click', (e) => {
e.stopPropagation()
hasButtonBeenClicked = true;
})
<button id="b1">click</button>
i made a chrome extension to get element from web pages by using click event listener on content page but preventDefault is working for few times only.
for example on this website when i click on the menu bar it redirects to the next page instead of preventing click action to happen.
this is my event listener in content.js
document.addEventListener('click', function xyz(e){
e.preventDefault();
//alert(e);
var target = e.target || event.srcElement;
var attributes = Array.prototype.slice.call(target.attributes).map(function(i) {
return [String(i.name)+": "+String(i.value)]
})
alert(attributes);
prompt("xpath1 :",getPathTo(target));
chrome.runtime.sendMessage({method:"captureElement",data:attributes});
},true)
how to stop click event from occuring !
This is because you attach the event handler on the document itself instead of some child. So if you click on a child element the event will be prevented only when it will reach the document through bubbling, but in the mean time it will have been triggered.
You either need to use return false; or use e.preventDefault(); and e.stopPropagation() together. Because this will prevent event from bubbling up to the parent anchor tag.
I need to capture the event that occurs when a user clicks a link on my chat application. I am using IE11.
Is there a way to capture the user clicking the link, when such a link could be dynamically added to the chat box (i.e. user sends "www.google.com" message) at any given time?
I have been using onbeforeunload by the way and while this detects the browser close event it will not detect the link click event, I am not sure why, so I was thinking that a jquery solution that checks the links on the page for an onclick could solve my problem...
Thanks,
dearg
Yes, you can use event delegation like:
$("#chatWindow).on('click', 'a', function () {
//do something
});
You could do it with a function like this:
$('a').on('click', function(){
//track clicked link here
return true; //to allow following the link this is the default behavior no need to add
return false; //prevent default behavior
});
Is it possible to trigger a click on a anchor link via javascript only (not Jquery - long story!).
We want to pass an anchor link's id into a function which will trigger the click, but have no idea how to trigger a click without jquery!
Thanks
In some browsers, you can just do something like document.getElementById(myelement).click() (I'm fairly sure this is the case of IE only, but it could be available in more).
Since it's an <a> tag you want to click, its default click event can be emulated fairly easily:
function clickLink(id) {
var tag = document.getElementById(id);
if( tag.onclick) {
var def = tag.onclick();
if( !def) return false; // event cancelled by handler
}
window.location.href = tag.getAttribute("href");
}
Note that this doesn't take into account event added with addEventListener or any other events than the .onclick property and onClick attribute, and it doesn't open a new window/tab if the user Ctrl+Clicks or MMB-clicks.
I have a mousedown event attached in an anchor element which does many stuffs.
I also have a mousedown event attached to the document, and because of bubbling this event is called whenever the event attached to anchor is triggered. This is not what I want.
Can I bind a event with delay?
I dont want to use stopPropagation.
$('a').mousedown ->
...
openWindow()
$(document).mousedown ->
...
closeWindow()
Edit
I create a hack
$.fn.onBubble = (events, selector, data, handler) ->
setTimeout =>
this.on events, selector, data, handler
, 0
Work but like very ugly
As one of the comments mentions, the only way to stop events from bubbling is with stopPropagation. That said, if there are both conditions where you do want to prevent bubbling and others where you do not, you can put event.stopPropagation() into an if-statement:
$(...).mousedown(function(event) {
if(/* some condition */) { event.stopPropagation(); }
});
Alternatively you can add a conditional to the event handler attached to the document. For example:
$(document).mousedown(function(event) {
if($(event.target).is("a")) {
return; // if the element that originally trigged this event
// (i.e. the target) is an anchor, then immediately return.
}
/** code that runs if event not from an anchor **/
});
This snippet uses $.fn.is to determine if the event was triggered by an anchor. If it is generated by an anchor, the code immediately returns, which in effect ignores the event bubble.
EDIT in response to comment:
If I understand correctly, you want to close the window, if the user clicks on anything that is not in the window. In that case try this:
function whenWindowOpens { // Called when the window is opened
var windowElement; // Holds actual window element (not jQuery object)
$(document).bind("mousedown", function(event) {
if($.contains(windowElement, event.target)) {
return; // Ignore mouse downs in window element
}
if($(event.target).is(windowElement)) {
return; // Ignore mouse downs on window element
}
/** close window **/
$(this).unbind(event); // detaches event handler from document
});
}
This is basically a variation on the second solution suggested above. The first two if-statements ensure the mouse down did not occur in (using $.contains) or on (using $.fn.is again) the windowElement. When both statements are false, we close the window and unbind the current event handler. Note that $.contains only takes raw DOM elements -- not jQuery objects. To get the raw DOM element from a jQuery object use $.fn.get.