Is it possible to detect if certain events are supported in certain browsers?
I can detect if the browser supports document.addEventListener, but I need to know if it supports the event DOMAttrModified. Firefox and Opera support it, but Chrome and others do not.
-
1I don't think it's possible however look here to see support for IE and Chrome as well: help.dottoro.com/ljdchxcl.phpuser447356– user4473562010-12-30 11:56:05 +00:00Commented Dec 30, 2010 at 11:56
-
Thankyou, however I already have working solutions for all browsers. I was hoping for a way to detect if certain browsers supported the event so I can apply my alternative methods. It seems I may have to resort to jQuery.browser detection.Ben– Ben2010-12-30 12:08:26 +00:00Commented Dec 30, 2010 at 12:08
-
This question is a duplicate of stackoverflow.com/questions/2877393/… (where you can find more answers)Martin– Martin2025-06-27 10:16:23 +00:00Commented Jun 27 at 10:16
Add a comment
|
2 Answers
Updated answer:
Yes, you can feature-detect this. Create an element, listen for the event, and change an attribute on the element. In my tests, you don't even have to add the element to the DOM tree, making this a nice, contained feature detection.
Example:
function isDOMAttrModifiedSupported() {
var p, flag;
flag = false;
p = document.createElement('p');
if (p.addEventListener) {
p.addEventListener('DOMAttrModified', callback, false);
}
else if (p.attachEvent) {
p.attachEvent('onDOMAttrModified', callback);
}
else {
// Assume not
return false;
}
p.setAttribute('id', 'target');
return flag;
function callback() {
flag = true;
}
}
Firefox triggers the callback on all of the modifications above; Chrome on none of them.
Original answer:
You can feature-detect whether some events are supported, as shown on this handy page. I don't know if you can test specifically for that one, but if you can, that code may well get you started.
Update: I dumped Kangax's code into JSBin and tried it, doesn't look like that sniffing technique works for that event (unless I have the name spelled incorrectly or something; Firefox is showing "false"). But my technique above does.
4 Comments
T.J. Crowder
@ifaour: Wow, that is weird. Also FF 3.6. And yet, we all know that's not true...
T.J. Crowder
@Yi Jiang: Yeah, kangax's code is for testing user-generated events. The test in my updated answer works great, since we can easily trigger the condition we're testing for. :-)
Ben
Thanks Crowder, works great! Coincidentally I actually just came up with this solution, and went to post it up here only to see you had beaten me to it!
function isDOMAttrModifiedSupported () {
var supported = false;
function handler() {
supported = true;
}
document.addEventListener('DOMAttrModified', handler);
var attr = 'TEST';
document.body.setAttribute(attr, 'foo'); // aka $('body').attr(attr, 'foo');
document.removeEventListener('DOMAttrModified', handler);
document.body.setAttribute(attr, null);
return supported;
}
1 Comment
Martin
That is not adding anything new that wasn't already covered by T.J. Crowder's answer from 2010.