15

Is it possible to emulate event capturing in Internet Explorer?

An example:

<a>one</a>
<a>two</a>
<a>three3</a>

<script>
var links = document.getElementsByTagName("A");
for (var i=0; i < links.length; i++) {
  links[i].onclick = function(){
    alert("clicked");
  };
}
</script>

I want to prevent all these click events from firing. I can do that with a single event observer:

document.addEventListener("click", function(e) {
    e.stopPropagation();
    e.preventDefault();
}, true);

How can I do the same in IE? IE < 9 does not support addEventListener. It does support attachEvent, but it doesn't have useCapture option.

I've found setCapture method, but it doesn't look related to the W3 capturing model.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
NVI
  • 14,907
  • 16
  • 65
  • 104

6 Answers6

5

Generally you can't because of the event order. In IE the events will start bubbling from the target element without the capturing phase so you can't catch them beforehand.

There's only one thing you can do, and it's only possible if you manage all the event handlers.

  1. Write a wrapper for addEvent with capture parameter

  2. If capturing is required do the following

    1. Register a simple bubbling event, with a function that
    2. Goes all the way up the parent chain, saving all the elements to an Array
    3. Travels backward this Array invoking the original event handler on each of the elements
gblazex
  • 49,155
  • 12
  • 98
  • 91
3

The Uniform Event Model project from JavaScript Lab appears to emulate the capture phase. Go to the download page for the JSLab DOM Correction library and select everything and select the commented format. Then download the code and search it for the word 'capture'. I have not tested the library or read much of its code.

Tom Elam
  • 93
  • 8
2

setCapture is used to retain some mouse-related action outside the browser window

and it is used to implement some kind of drag&drop

if you mousedown an element and you will go with your pointer outside the browser window the mousemove event stops to work

if you setCapture() the mousemove event will continue to work outside the browser window

https://developer.mozilla.org/en/DOM/element.setCapture

and the related method to release capture

https://developer.mozilla.org/en/DOM/document.releaseCapture

so, it has nothing in common with the capturing event model and, there's no known way to emulate it in internet explorer in a standard way!

hope this helps!

1

IE has a Element.setCapture() method that you may find useful http://msdn.microsoft.com/en-us/library/ms536742(v=vs.85).aspx It allows you to route all mouse events to the element that called setCapture()

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
  • Please leave a comment when you downvote! As far as I know, the only way to emulate the capture phase is using setCapture. The OP doesn't seem to want to use it, but there's no other way. Please prove me wrong if you want to down vote me. – Ruan Mendes Oct 07 '11 at 18:34
  • 1
    I suspect this got downvoted because the OP was asking how to deal with capture vs. bubbling event phases in IE, so that he can block child elements from receiving events. There's no way to use `.setCapture()` method for what he's trying to do — it doesn't "emulate the capture phase" at all, it just effects the targeting of mouse events during a drag. – natevw Feb 13 '12 at 23:33
0
function myFunction(e) {
   if (!e) var e = window.object;//legacy event object
   if (e.preventDefault) e.preventDefault();//prevent firing in W3C model
   return false; //exit event, no firing, listener must registered to anchor tag
}    
var x = document.getElementsByTagName("A");

if (x.item(0).addEventListener) { 
    for (var i = 0, l = x.length; i < l; i++) {
        x.item(i).addEventListener("click",myFunction,false);
    }
}//W3C model
else if (x.item(0).attachEvent) {
    for (var i = 0, l = x.length; i < l; i++) {
        x.item(i).attachEvent("onclick",myFunction);
        }
    }// legacy browsers
Gel
  • 51
  • 7
0

The best way if you use only bubbling for clicks:

if (document.addEventListener) document.addEventListener("click", function(e){e.preventDefault();},false);
else if (document.attachEvent) document.attachEvent("onclick", function(){window.event.returnValue = false;});
Gel
  • 51
  • 7