This project is archived and is in readonly mode.

#731 ✓resolved
Barryvan

addEvent('timeupdate' ...) to Audio elements doesn't work

Reported by Barryvan | August 10th, 2009 @ 03:18 PM | in 2.0 (closed)

Working with the HTML5 element, I've found that doing something like

audioElem.addEvent('timeupdate', function() {
  console.log('time updated');
});

won't actually add the event to the element; nor will adding the events at the element's creation, like so:

var audioElem = new Element('audio', {
  'events': {
    'timeupdate': function() {
      console.log('time updated');
    }
  }
});

 Adding the event the 'old-fashioned' way works, however; that is:

audioElem.addEventListener('timeupdate', function() {
console.log('time updated'); }, true);


This isn't critical; there is, after all, a workaround, but it's just not nice to have to intersperse my JS with non-Moo code.

Comments and changes to this ticket

  • Scott Kyle

    Scott Kyle August 10th, 2009 @ 05:00 PM

    @Barryvan Calling addEvent in MooTools attaches the event using bubbling not capturing (i.e. addEventListener(type, fn, false) is called). In your example, you passed "true" for useCapture argument in addEventListener. Could you please let me know if passing "false", as MooTools does, still works for you. Thanks.

  • fakedarren

    fakedarren February 8th, 2010 @ 06:58 PM

    • State changed from “new” to “open”
    • Assigned user set to “Scott Kyle”

    Scott - assigning this to you, as you seem to know what the issue is. Sorry!

    @Barryvan - does Scott's suggestion fix your issue?

  • Jean-Nicolas Boulay Desjardins

    Jean-Nicolas Boulay Desjardins February 13th, 2010 @ 06:55 PM

    • Tag changed from audio, event, events, html5 to audio, dragover, drop, event, events, html5, video

    I had the same problem with the video element.

    But not only the video element, but with also: dragover and drop

    I don't know if this problem applies to other events.

    Here is the code:

    var dropbox = $("dropbox");
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);

    function dragover(e) {

    e.preventDefault();
    

    }

    function drop(e) {

    e.preventDefault();
    var dt = e.dataTransfer;
    var files = dt.files;
    
    handleFiles(files);
    

    }

    But if I use:

    dropbox.addEvent('dragover', function(e){

        e.preventDefault();
    }
    

    );

    It won't work.

  • fakedarren

    fakedarren February 14th, 2010 @ 11:37 AM

    Here's a shell example: http://mootools.net/shell/EMKfQ/

    We need to make some changes to Core to allow html5 events to allow you to bind them in this way. It is unlikely these will find their way into 1.3 but may be present in 1.31.

  • Jean-Nicolas Boulay Desjardins

    Jean-Nicolas Boulay Desjardins February 14th, 2010 @ 09:10 PM

    Thanks for the link.

    I was able to apply it to my code and it works very well. I have to say I'm not sure what I did.

    Here:

    Element.NativeEvents = $merge(Element.NativeEvents, {
        dragover: 2,
        drop: 2
    });
    
    var dropbox = $("dropbox");
    
    dropbox.addEvent('dragover', function(e){
            e.event.preventDefault();
    });
    
    dropbox.addEvent('drop', function(e){
        e.event.preventDefault();
            var dt = e.event.dataTransfer;
            var files = dt.files;
    
            handleFiles(files);
    });
    
  • fakedarren

    fakedarren February 14th, 2010 @ 09:23 PM

    • State changed from “open” to “resolved”

    This is being done for 1.3. So marking as resolved.

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Pages