[英]ember.js ReferenceError: event is not defined in firefox
I want to access the event object inside an ember action to check the target element. 我想在ember动作中访问事件对象以检查目标元素。 This works in Chrome and Safari but not in Firefox 25.0. 这在Chrome和Safari中有效,但在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? 我如何在ember动作中访问事件对象,或者有没有余烬的方法?
How to reproduce: 繁殖方法:
HTML 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 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/ http://jsfiddle.net/mszrnyi/3REEj/2/
Some browsers create a global event object in window.event
, but this isn't cross browser. 一些浏览器在window.event
创建一个全局事件对象,但这不是跨浏览器。
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. 因此,不会传递任何事件对象,并且在触发{{action}}
会执行event.preventDefault()
,因此您的链接不会打开新窗口。
You will need to use just click
. 您只需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. 另外,还需要从components/test-a
模板中删除{{action 'edit' on="click"}}
。 Otherwise the event.preventDefault()
will be executed. 否则将执行event.preventDefault()
。
<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/ 这是更新的小提琴http://jsfiddle.net/8Ephq/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.