focusin event triggers in IE for floated and Inline Block element - javascript

The focusin event which is a part of form inputs and link tag, is getting applied for div and span tags. It happens for floated and inline-block element. The issue is spotted in IE (8 and 9).
Demo ==> http://jsfiddle.net/Agczq/
Is there a way to stop this?

Unlike you might expect focusin and focusout do bubble up, unlike the regular focus event. The two main ways of dealing with this are: Event delegation, or simply stopping the event from bubbling up.
Your fiddle is hard to make sense of (ie: don't know what you're trying to do). The first thing that comes to mind (after moving your JS code to the JavaScript field on jsfiddle) is that you're capturing a focus event in good browsers, and the bubbling focusin in crummy IE. This can be quite annoying, particularly since IE doesn't support actual event capturing. Nevertheless, here's a (simple, but tested and working) suggestion:
function mycb(evt)
{
evt = evt || window.event;//get event object
var from = evt.target || evt.srcElement;//get source
if (evt.stopPropagation)//stop event from bubbling
{
evt.stopPropagation();//shouldn't be necessary, but you never know
}
else
{
evt.cancelBubble = true;//stop propagation in IE-lingo
}
if (from.tagName === 'DIV' || from.tagName === 'SPAN')
{//if source was a tag that souldn't fire event, return false;
if (evt.preventDefault)
{
evt.preventDefault();
return false;
}
evt.returnValue = false;
return false;
}
alert("fired!!!");
}
var elem = document.getElementById("mybox");
if( elem.attachEvent )
{
elem.attachEvent("onfocusin", mycb);
}
else
{
elem.addEventListener("focus", mycb, true);
}
This code was tested in IE8, fiddle can be found here. It just so happens I read about this event today, here. A source worth mentioning, I reckon.
Hope this helps

Related

Keyup to Manipulate div

Haven't post in quite a while.
Anyway I was searching about my subject and I got this.
$(window).keyup(function(e) {
if (e.which === 8) {
$('.ilol'). fadeOut();
}
});
It's working perfectly fine. But when I change the window to a class or id it doesn't respond anymore.
There's not a lot of detail about the type of element you are trying to attach this event handler to, but the jQuery documentation explains that form elements (e.g. input) are a safe bet because they are able to be focused across most browsers:
The keyup event is sent to an element when the user releases a key on
the keyboard. It can be attached to any element, but the event is only
sent to the element that has the focus. Focusable elements can vary
between browsers, but form elements can always get focus so are
reasonable candidates for this event type.
http://api.jquery.com/keyup/
It may also be a selector issue. Make sure that your selector is working properly by pasting it in your browser's JavaScript console and see if it returns any elements.
Make sure you are binding event in ready function.
$(document).ready(function(){
$('.someClassName').keypress(function(e) {
if (e.keyCode === 8) {
$('.ilol'). fadeOut();
}
});
});
After some testing this is what worked best for me. The 40 key in this example is the down arrow key.
$(document).keydown(function(e)
{
if(e.keyCode == 40){
$('.ilol').fadeOut('fast');
}
});

Why doesn't preventDefault() stop focus change after a Tab-keypress?

I was fiddling with preventDefault() and must be doing something wrong.
$("#input").bind("keypress", function(event) {
if(event.which == 9) {
event.preventDefault();
alert("You pressed tab.");
}
});
The tab functionality isn't prevented. What's wrong with this?
Try this FIDDLE. The input loses focus when you tab. Binding to the body fixes this.
$("body").on("keydown", function(event) {
if(event.which == 9) {
event.preventDefault();
alert("You pressed tab.");
}
});
The keypress event is simply not fired when the Tab is pressed - this also explains why there is no alert, independent of what preventing the default may do.
Changing the code to use keydown allows the Tab to be caught and prevents the default focus-change (in Chrome1, anyway).
$("#input").bind("keydown", function(event) {
if(event.which == 9) {
event.preventDefault();
}
});
1 I tested the above in Chrome 35 with jQuery 1.6-2.1; it does not work under the KO 3.0 library.
From the documentation on JQuery,
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
This method is a shortcut for .on( "keypress", handler ) in the first two variations, and .trigger( "keypress" ) in the third.
The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.
So in this case you are using the wrong event. Also it might have browser compatibility issues.

Bubbling Event Design

I have a bunch of <td>'s in a table that have onmouseover and onmouseout events. I would like for there to only be one event handler, say on the <table> itself that knows how to handle all the events to prevent so many event handlers on the page. Using native javascript, what is the best way to do this?
The events should bubble up to the table unless they are cancelled in the process from an element lower down in the hierarchy. You can setup event listeners for mouseover and mouseout events on the table and check if the target is a <td> cell. If so, then process those events. Here's a quick example.
var table = document.getElementById("myTable");
table.addEventListener('mouseover', function(event) {
var target = event.target;
if (target.nodeName == 'TD') {
target.style.backgroundColor = '#FFF';
}
});
See the compatibility table for mouse events. Since older versions of IE do not follow the DOM event registration model as per the w3c spec, you would have to use attachEvent to attach events for IE only.
Read up this article to get a better understanding of the differences in IE and other browsers.
Checkout a non cross-browser example here.
You should use unobtrusive javascript so that you have the two handlers set up for each but it doesn't clutter up the page. Use getElementsByTagName("td") to get the - modify that as appropriate. Then loop through and for each element, tableElem, tableElem.onMouseOver = function(){whatever... } and tableElem.onMouseOut = function(){whatever ... }.
You can make it terser if you want to use jQuery, e.g. $("td").mouseOver(function(){whatever;});
Example code:
table.onmouseover = function(event) {
var target = (event && event.target) || window.event.srcElement;
if(target.nodeName.toLowerCase() !== 'td') return;
// do stuff
};

How to trap right-click event?

What is the way to trap a right-click event on a document element? I could not find any event handlers anywhere.
Right-click is special on many browsers, triggering the contextmenu event rather than a click event. Some browsers let you prevent the default behavior, some (Opera, for instance) do not. More here: http://unixpapa.com/js/mouse.html
EDIT: Rereading that page (it'd been a while), it looks like mousedown and mouseup are even more reliable than contextmenu (although all major browsers trigger contextmenu). click, on the other hand, doesn't appear to happen at all, on any significant browser.
I think there is event "oncontextmenu", you can hook it.
Here is the jQuery based contextmenu handler,
http://www.trendskitchens.co.nz/jquery/contextmenu/
PS:It doesn't work in My Opera though.
You can use the
window.oncontextmenu
An event handler property for
right-click events on the window.
If you need to disable the right click in a page then you can use something like this
window.oncontextmenu = function () {
return false;
}
or if you need to give your own custom context menu then also you can code inside the function.
You probably want the click or mousedown/up event. From quirksmode:
function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}
The event has a "button" attrubute
so lmb is 0
mmb is 1
rmb is 2
http://www.w3schools.com/jsref/event_button.asp

How to detect left click anywhere on the document using jQuery?

I have this right now:
$(document).click(function(e) { alert('clicked'); });
In Firefox, this event is firing when I left-click OR right-click. I only want it to fire when I left-click.
Does attaching a click handler to the document work differently than attaching it to other elements? For other elements, it only seems to fire on left clicks.
Is there a way to detect only left clicks besides looking at e.button, which is browser-dependent?
Thanks
Try
$(document).click(function(e) {
// Check for left button
if (e.button == 0) {
alert('clicked');
}
});
However, there seems to be some confusion as to whether IE returns 1 or 0 as left click, you may need to test this :)
Further reading here: jQuery Gotcha
EDIT: missed the bit where you asked not to use e.button. Sorry!
However, the example here returns the same ID regardless of looking at it in FF or IE, and uses e.button. could possibly have updated the jQuery framework? The other answer is that older versions of IE return a different value, which would be a pain. Unfortunately I only have IE 7/8 here to test against.
You could simply register for a "contextmenu" event like this:
$(document).bind("contextmenu",function(e){
return false;
});
Taken from: http://www.catswhocode.com/blog/8-awesome-jquery-tips-and-tricks
I've read that if you bind with "live" in jQuery 1.3, jQuery normalizes the click between browsers. I've not tested this.
However, this would indicate that it doesn't: http://abeautifulsite.net/notebook/99
Since you say click works correctly everywhere but on "document," have you tried a 100% div over the document to catch the click?
There is no not-browser-dependent way to detect only left-clicks. You can use this code that works under IE and non-IE browsers:
$("#element").live('click', function(e) {
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
// Left mouse button was clicked (all browsers)
}
});
Taken from: http://abeautifulsite.net/notebook/99

Categories