#325 ✓resolved
Oleg K

Google Chrome and Events handling

Reported by Oleg K | September 4th, 2008 @ 08:22 AM | in 1.6.1

Hey guys,

there's one issue with chrome browser

let's say I have


<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />

<script>
$$('img').each( function(elem) {
   Event.observe(elem, 'mouseover', fn);
});

function fn() {
alert(this.src);
}

</script>

it works as expected in all browsers I have IE 6,7, Opera, FF 2,3 and Safari for Win but does not in chrome, to be correct, 'fn' function is applied only to the first element (<img src="1.jpg" />)

so when I mouseover on I get alert with '1.jpg' text, when mouseovered to , nothing is hapenning.

Сan anyone help to fix this please.

Comments and changes to this ticket

  • Oleg K

    Oleg K September 4th, 2008 @ 07:18 AM

    Ok, so, when I mouseover to the first image, 'fn' is fired, 2nd, 3rd image ignore 'fn' and nothing is hapenning.

  • John-David Dalton

    John-David Dalton September 4th, 2008 @ 08:26 AM

    maybe the images have to be loaded first:

    
    
    function fn() {
      alert(this.src);
    }
    
    $$('img').invoke('observe', 'load', function() {
      this.stopObserving('mouseover').observe('mouseover', fn);
    });
    
  • Oleg K

    Oleg K September 4th, 2008 @ 09:45 AM

    yes, they are loaded first still doesn't work, works for first image only.

    I feel like when I attach an event in for ( ..), 2nd, 3rd loops link to the first object.

  • Juriy Zaytsev

    Juriy Zaytsev September 4th, 2008 @ 01:45 PM

    • State changed from “new” to “bug”
    • Tag changed from chrome, events to chrome
    • Milestone set to 1.7
  • Chris Lear

    Chris Lear September 5th, 2008 @ 06:08 PM

    I've found this problem, and managed (I think) to work around it.

    I changed line 3881 (prototype 1.6) from

    
    return cache[id] = cache[id] || { }
    

    to

    
    if (cache[id]) {
      return cache[id];
    } else {
      return {};
    }
    

    What chrome was doing seems to be as though the line was:

    return cache[id]=cache;

    which is weird. It's possible that this sort of bug occurs elsewhere, I guess.

  • Mark Caudill

    Mark Caudill September 6th, 2008 @ 06:12 AM

    I'm unsure if that's a good idea to do it as you suggested. I don't know why Chrome would see return cache[id] = cache, as that's a pretty simple comparison and is used throughout the library.

    If it's true, we may just need some form of order of operation change:

    
    return cache[id] = cache[id] || { };
    

    to

    
    return cache[id] = (cache[id] || { });
    

    Can you try that out and see if that returns the desired result? The cache[id] is supposed to be set by the getCacheForID if it's empty so that the returned object is the same referenced object as the one that was requested.

  • Oleg K

    Oleg K September 7th, 2008 @ 08:24 PM

    thanks guys, I'll check that soon.

  • Oleg K

    Oleg K September 7th, 2008 @ 08:38 PM

    Hey Mark, I've tried what you suggested, but no change

    so, doesn't work:

    
    return cache[id] = cache[id] || { };
    or
    return cache[id] = (cache[id] || { });
    

    works as expected:

    
    if (cache[id]) {
      return cache[id];
    } else {
      return {};
    }
    
    or
    
    var ret  = cache[id] || { };
    return ret;
    
  • Chris Lear

    Chris Lear September 8th, 2008 @ 11:47 AM

    Further followup:

    This works:

    
    cache[id]=cache[id]||{}
    return cache[id];
    

    But the original line (which looks like it ought to be identical) doesn't.

    If I add a debug line in the getWrappersForEventName function, like this:

    
    debug(c==cache)
    

    it returns true in the original case, which is why I said it looked like chrome was interpreting the return statement as though it was

    
    return cache[id]=cache;
    

    I've been trying to recreate this weirdness in a simple bit of js to locate the source of the bug, but so far I haven't been able to.

  • Maikel Punie

    Maikel Punie October 8th, 2008 @ 09:53 AM

    hi,

    it seems that in google chrome the event.stopobserving is not working

    a simple test that proves this: start observer
    stop observer
    click

  • Maikel Punie

    Maikel Punie October 8th, 2008 @ 09:56 AM

    ** should have read the formatting help first :D

    anyway here is the code

    
    <a onclick="javascript:Event.observe('click', 'click', goob);">start observer</a><br />
    <a onclick="javascript:Event.stopObserving('click', 'click', goob);">stop observer</a><br />
    <a id="click">click</a><br />
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript">function goob() { alert('yes'); }</script>
    
  • Andrew Dupont

    Andrew Dupont October 9th, 2008 @ 01:11 AM

    • State changed from “bug” to “works_for_me”
    • Milestone cleared.

    Both the original code example and Maikel's code work for me with the latest Chrome.

  • Andrew Dupont

    Andrew Dupont October 9th, 2008 @ 01:23 AM

    • Assigned user set to “Andrew Dupont”
    • State changed from “works_for_me” to “bug”
    • Milestone set to 1.6.1

    Whoops; never mind. I can reproduce both.

  • GitHub Robot

    GitHub Robot October 10th, 2008 @ 08:43 PM

    • State changed from “bug” to “resolved”

    (from [3e2e8d48b58061a993d1c1323c50c13554027cde]) Work around an issue with assigning a variable within a "return" statement in V8/Google Chrome. [#325 state:resolved] http://github.com/sstephenson/pr...

  • Tobie Langel
  • Costis Papadakis

    Costis Papadakis February 8th, 2010 @ 08:31 PM

    In Chrome 4.0.249.78, if image is in cache, then image 'load' event fails.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

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

The Prototype JavaScript library.

Shared Ticket Bins

Referenced by

Pages