Event.target issue with Firefox 6 - javascript

In Firefox 6 I tried to get the target element on which the event occurred, but it does not show any element and it shows undefined in alert. Tried to debug it using the Firebug tool and found the attribute "target" missing for the event object. Can anyone help me out? I do have the code below:
function getSource(event)
{
if(!event)
{
field = window.event.srcElement;
alert(field);
}
else
{
field = event.target;
alert(field) //Getting undefined in FF6
}
}
Edited Portion:
document.onkeypress = getSource;
document.onmouseup = getSource;
Any help would be appreciated.

Try the code below
function getSource(e)
{
if(!e)
e = window.event;
field = evt.srcElement || evt.target;
alert(field);
return true;
}
Hope this helps you.

Test this in Fx 6:
<script type="text/javascript">
window.onload = function() {
document.getElementById('d0').onclick = showTarget;
}
function showTarget(e) {
e = e || window.event;
var target = e.target || e.srcElement;
alert(target.tagName);
}
</script>
<div id="d0">
<p>click on me</p>
</div>
It should alert "P".

As also explained in the similar question, change the function to this:
function getSource(evt)
{
if(!evt)
evt = window.event;
if (evt) {
field = evt.srcElement || evt.target;
alert(field);
return true;
}
alert("event not found");
return false;
}

function getSource(ev) {
var el=(ev=ev||window.event).target||ev.srcElement;
alert(el+" "+el.tagName);
}

Related

Blocking F5 refresh not working in Chrome

Here is the code that worked earlier, but now doesn't work anymore. Does anyone know why?
document.onkeydown = function()
{
if(event.keyCode==116) {
event.keyCode=0;
event.returnValue = false;
}
}
// To avoid refresh, using context menu of the browser
document.oncontextmenu = function() {event.returnValue = false;}
You refer to event in your functions, but you never actually pass it:
document.onkeydown = function(){ /* ... */ }
document.oncontextmenu = function() {event.returnValue = false; }
// should be
document.onkeydown = function(event){ /* ... */ }
document.oncontextmenu = function(event) {event.returnValue = false; }
In the first version of the oncontextmenu you set 'returnvalue' of object 'event' to false, but it doesnt exist because you never actually pass it on to the function.
Recieve the event in your function
document.onkeydown = function(event)
{
if(event.keyCode==116) {
event.keyCode=0;
event.returnValue = false;
}
}
Or Try preventing the action by that key
document.onkeydown = function(event)
{
if(event.keyCode==116) {
event.preventDefault();
}
}
try this
<script>
window.onload = function () {
document.onkeydown = function (e) {
return (e.which || e.keyCode) != 116;
};
}
</script>

prevent default 'F1' event in iE11

When the user press F1 key,I am planning to display our application help and suppress default action.
I tried with different options not to show help popup of IE.
Here is my Code:
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
Please let me know how can i achieve in showing the help page of my application instead of IE help.
I am using IE11 version.
You could subscribe to the window.onhelp event:
window.onhelp =function() {
alert();
return false;
}
Try doing this
<script>
$(document).ready(function () {
removedefaulthelp();
function removedefaulthelp()
{
window.onhelp = function () {
return false;
alert();
}
}
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
removedefaulthelp();
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
}
</script>
Refer this for more information.
Here is an example similar to Sukanya's answer, but my solution shows how to extend for the F2-F12 keys, and purposely disregards F-combination keys, such a CTRL + F1.
<html>
<head>
<!-- Note: reference your own JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>

Javascript character restriction and calling a function with getElementById

I have a JS function that checks and restricts certain characters typed in input forms.
The code look like this:
var alphaOnly = /[sA-Za-z\söÖäÄüÜ]/g;
var alphaextraOnly = /[A-Za-z\-&/'"\öÖäÄüÜ]/g;
var alphadigitsOnly = /[sA-Za-z\söÖäÄüÜ\s1234567890]/g;
var digitsOnly = /[1234567890]/g;
var integerOnly = /[0-9\.]/g;
var mailOnly = /[a-z\.#]/g;
function restrictCharacters(myfield, e, restrictionType) {
if (!e) var e = window.event
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code);
// if they pressed esc... remove focus from field...
if (code==27) { this.blur(); return false; }
// ignore if they are press other keys
// strange because code: 39 is the down key AND ' key...
// and DEL also equals .
if (!e.ctrlKey && code!=9 && code!=8 && code!=36 && code!=37 && code!=38 && (code!=39 || (code==39 && character=="'")) && code!=40) {
if (character.match(restrictionType)) {
return true;
} else {
return false;
}
}
}
It works when I add onkeypress to input like this:
<input type="text" class="span4 register_input" id="firma" name="firma" onkeypress="return restrictCharacters(this, event, alphaOnly);" />
But I want to do that with getElementById in the script. I tried to add this:
window.onload = function() {
document.getElementById("firma").onkeypress = restrictCharacters(this, event, alphaOnly);
}
But it didn't work... Help please.
You can't pass the arguments like that to onkeypress you would need to use a wrapper function
document.getElementById("firma").onkeypress = function (e)
{
return restrictCharacters(this,e,alphaOnly);
};
jsFiddle http://jsfiddle.net/BjU2e/5/
You are assigning to onkeypress the result of restrictCharacters(this,event,alphaOnly) instead of a function delegate. A correct version is in the following jsFiddle : http://jsfiddle.net/xL47r/1/
For future reference :
document.getElementById("firma2").onkeypress = function(e) {
return restrictCharacters(this,e,alphaOnly);
};
You can get this from e.target
document.getElementById("firma").onkeypress = function(e) {
restrictCharacters(e.target,e,alphaOnly);
}
document.getElementById("firma").onkeypress = function(){
return restrictCharacters.call(this/*becauseof 'this.blur()' */, this,event,alphaOnly);
};
You have wrong syntex to bind event with dom .here it is : window.onload = function () {
var ab = document.getElementById("firma");
ab.setAttribute("onkeypress", "restrictCharacters(this,event, true)");
}

IE : get object from event

I want to get href attribute when a use clicks on a URL.
I've tried with:
var e = clickedElement || window.event;
var t = e.target || e.srcElement;
alert(t.href);
This is working fine in Chrome and Firefox, but there's a problem with IE; its give an error null.
What is possible solution to get href from event object?
Depends what clickedElement is, given that its either the event object argument placeholder or a this argument;
function event_obj(event) {
if (!event) var event = window.event;
var element = event.target || event.srcElement;
alert(element.href);
return false;
}
function element_obj(element) {
alert(element.href)
return false;
}
.
.
foo
bar
Use this function to get the event target
function getEventTarget(event) {
var targetElement = null;
try {
if (typeof event.target != "undefined") {
targetElement = event.target;
}
else {
targetElement = event.srcElement;
}
} catch (ex) { alert("getEventTarget failed: " + ex); }
return targetElement;
};
Then call it when you trigger the event
function evtrigger(ev) {
alert(getEventTarget(ev).href);
}
Note the getEventTarget() function works for all events so the DOM object returned can be manipulated any way you like, not just to get the href.

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