ember.js ReferenceError: event is not defined in firefox

Question

I want to access the event object inside an ember action to check the target element. This works in Chrome and Safari but not in Firefox 25.0.

I don't even get an error message. How can I access the event object inside an ember action or is there an ember way to do it?

How to reproduce:

1. open my fiddle
2. click on the div or the 'click me' link which should open an alert box
3. test these in chrome and firefox

HTML

  <script type="text/x-handlebars" data-template-name="application">
      <h1>Click the link in the following div</h1>
      {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="index">
      {{test-a}}
  </script>
  <script type="text/x-handlebars" data-template-name="components/test-a">
    <div class="index" {{action 'edit' on="click"}}>
        <a href="http://www.example.com" target="_blank">Click me</a>
    </div>
  </script>

Coffee

App = Ember.Application.create({});

App.TestAComponent = Ember.Component.extend
    actions:
        edit: ->
            if event.toElement.nodeName.toUpperCase() == 'A'
                return true # should bubble to the window but is a component
            # do something for editing here
            alert('div clicked')
            false

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }
.index { background-color: #666; padding: 20px; }

http://jsfiddle.net/mszrnyi/3REEj/2/

Answer 1

Some browsers create a global event object in window.event , but this isn't cross browser.

With actions handlers you won't get this working. Because actions is a toplevel way to handle browser events. So no event object is passed, and when a {{action}} is triggered a event.preventDefault() , is performed, so your link won't open a new window.

You will need to use just click . This is a low level way to handle browser events, so you will get the event object in the first parameter. And the bubble expected behavior based on the boolean returned:

 App.TestAComponent = Ember.Component.extend    
    click: (event) ->                
        if event.toElement.nodeName.toUpperCase() == 'A'
            alert('link clicked')
            return true # should bubble to the window but is a component
        # do something for editing here
        alert('div clicked')       
        false

Also, the {{action 'edit' on="click"}} need to be removed from your components/test-a template. Otherwise the event.preventDefault() will be executed.

  <script type="text/x-handlebars" data-template-name="components/test-a">
    <div class="index">
        <a href="http://www.example.com" target="_blank">Click me</a>
    </div>
  </script>

This is the updated fiddle http://jsfiddle.net/8Ephq/