AddEventListener on every links and childs - javascript

Is it possible to attach a new event to every links of a page recursively? Currently I'm using the following code:
var linkHandler = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
console.log("Element clicked, type: "+element.tagName);
if (element.tagName == 'A') {
console.log("Catched "+element.href);
element.href = url(element.href);
}
};
document.addEventListener("click", linkHandler, true);
But it only works if I directly click on a link. For example here, only the click on "Work" of the second link works.
<strong>Doesn't work</strong>
Work <strong>Doesn't</strong>`
Is there another possibility ?

Related

Turn table contenteditable when tab key pressed

I am making a table entering tool, and I want to type items in when I press tab instead of having to click on each element. I was not able to figure out how to make that work, however.
$('table').on('mousedown objEvent.keyCode == 9', 'td', function(event) {
event = event || window.event;
var elementClass = $(this).attr('class');
if (elementClass != "noedit") {
$(event.target).closest('td').prop("contentEditable", true);
}
I've tried mousedown and tab key and only mousedown worked.
$('table').on('focus', 'td', function(event) {
event = event || window.event;
var elementClass = $(this).attr('class');
if (elementClass != "noedit") {
$(event.target).closest('td').prop("contentEditable", true);
}
Only mousedown worked this way as well.
Jsfiddle: https://jsfiddle.net/vLsw0goe/
Thank you.
try this:
$('table').on('mousedown', 'td:not(.noedit)', function(event) {
event = event || window.event;
$(event.target).closest('td').prop("contentEditable", true);
});
$('table').on('keydown', 'td:not(.noedit)', function(event) {
var i = $("td:not(.noedit)").index($(this));
$("td:not(.noedit)").eq(i+1).trigger("mousedown");
});

Bind an event with onbeforeunload

I use the following code to prompt a message if the user close the page :
window.onbeforeunload = function(e) {
e = e ? e : window.event;
if(e) {
e.returnValue = '';
}
return '';
}
I would like to avoid the prompt this message shows when a user clicks a special link (let say id="myid") on the page. Is it possible? I tried like this:
var source = e.target || e.srcElement;
console.log(source);
But source is null, is it possible to bind the event and to check it with onbeforeunload?
and what are the "e" attributes ? how I can look into this "object" ? Any idea ?
Unbind the event if the link is clicked and then redirect
window.onbeforeunload = null;

How to get all links on page to play sound on click?

I have a page with a lot of links and instead of inserting
onclick="clicksound.playclip()"
into each one, is there a way i can all of the links on the page to use that code with it on the page in only one area?
If by "links" you mean all anchors,
It can be done using jQuery:
$(document).ready(function() {
$("a").click(function() {
clicksound.playclip()
});
});
Or pure javaScript:
document.links.addEventListener("click", clicksound.playclip);
Add a listener to the body, see if a click came from a link, play a sound if it did. You could also use document.links to get all the links and add a listener to each one, but that seems inefficient.
Note that not all A elements are links.
Edit
Here's a plain JS solution, the upTo and listener attachment parts should be in your library:
function upTo(root, tagName) {
tagName = tagName.toLowerCase();
do {
root = root.parentNode;
if (root.tagName.toLowerCase() == tagName) {
return root;
}
} while (root.parentNode && root.parentNode.tagName)
}
function playSound(evt) {
var evt = evt || window.event;
var tgt = evt.target || evt.srcElement;
if (tgt && tgt.nodeType != 1) tgt = tgt.parentNode;
tgt = tgt.tagName.toLowerCase() == 'a'? tgt : upTo(tgt, 'a');
if (tgt && tgt.href && tgt.href != '') annoyUserWithSound();
}
window.onload = function() {
if (document.body.addEventListener) {
document.body.addEventListener('click', playSound, false);
} else if (document.body.attachEvent) {
document.body.attachEvent('onclick', playSound);
}
}
function annoyUserWithSound(){
console.log('be annoyed by sound…');
}

Event mouse down javascript toElement

When i'm handle click to edit area. i use folowing function
Function.prototype.closureListener = function() {
var __method = this, args = bkLib.toArray(arguments), object = rgs.shift();
return function(e) {
e = e || window.event;
if(e.target) { var target = e.target; } else { var target = e.srcElement };
return __method.apply(object, [e,target].concat(args) );
};
}
and add event
this.elm.addEvent('mousedown',this.selected.closureListener(this))
But when i click at the end of the line
asdasdasd<b>sdasdasdasd<b>
sometimes it's select like a target all body(as Element) or only sdasdasdasd.
What should i add that he took only sdasdasdasd but not all body.
P.S When i click somewhere in the middle it's always takes sdasdasdasd
P.S.S nicEdit i'm using this nicEdit panel.

How to implement jQuery's .not()?

I have code like:
document.onmousedown = function(){
alert('test');
}
Now, except the element with ID "box", clicking should call this function, i.e. the equivalent of jQuery's .not() selector.
The jQuery code would be:
$(document).not('#box').mousedown(function(){
alert('test');
});
How can I achieve the same thing without using jQuery?
Edit: I don't want jQuery code, but i want an action similar to the .not() selector of jQuery in Javascript.
Edit: I am making an addthis-like widget. It is a 10kb file which will show a popup when a text is selected. It will not use jQuery.
In my case, when a text is selected, a popup is shown. When the document is clicked somewhere other than the widget, the widget should disappear.
To do this properly, you need to check whether e.target || e.srcElement or any of its parents has id === 'box'.
For example: (with jQuery)
$(document).mousedown(function(e) {
if ($(e.target).closest('#box').length)
return;
//Do things
});
Without jQuery:
function isBox(elem) {
return elem != null && (elem.id === 'box' || isBox(elem.parentNode));
}
document.onmousedown = function(e) {
e = e || window.event;
if (isBox(e.target || e.srcElement))
return;
//Do things
};
Alternatively, you could handle the mousedown event for the box element and cancel bubbling.
Here's one way that should work:
document.onmousedown = function(e){
var event = e || window.event;
var element = event.target || event.srcElement;
if (target.id !== "box") { alert("hi"); }
}
or if you would like it to be reusable with different ids:
function myNot(id, callback) {
return function (e) {
var event = e || window.event;
var element = event.target || event.srcElement;
if (target.id !== id) { callback(); }
}
}
and to use it:
document.onmousedown = myNot("box", function () {
alert("hi");
});
The cleanest way I can come up with for what you're trying to do is to set a document.onmousedown event and then halt event propagation on the box.onmousedown event. This avoids creating a large number of onmousedown events all over the document, and avoids having to recurse through the entire parent hierarchy of a node every time an event is triggered.
document.onmousedown = function() {
alert("Foo!");
};
document.getElementById("box").onmousedown = function(e) {
alert("Bar!");
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
};

Categories