Question

我想处理View的click事件并触发文件输入元素的单击。

我也不想展示丑陋的＆＃39;输入元素框，所以我使用CSS将其推离视口并将不透明度设置为0。

input[type='file'] {
  opacity: 0;
  top: -100px;
  position: absolute;
}

我使用jQuery在HTML中做了一个模型，它完全按照我的意愿工作。请参阅链接： JSFIDDLE

我也尝试在Ember中实现相同的功能，并且它会抛出错误

未捕获RangeError：超出最大调用堆栈大小

仅供参考，这是Ember - JSBIN

// View
App.DropView = Ember.View.extend({
  templateName: 'dropView',

  click: function(event) {

    $("input[type='file']").click();
    event.preventDefault();

  }
});

模板：

<!-- Template -->
<script type='text/x-handlebars' data-template-name='dropView'>
    <a href="javascript:void(0)">Click Me</a>
    <input type='file' id='files'>
</script>

Answer 1

您必须在输入上停止事件传播，否则触发输入上的点击将继续触发视图上的点击：

http://jsbin.com/giqunoya/4/

Answer 2

您将click事件绑定到整个视图。因此，当您点击<a>标记时，就会发生这种情况：

该事件将冒泡到视图
点击视图称为
单击文件输入
该事件将冒泡到视图
重复直到Uncaught RangeError: Maximum call stack size exceeded

您应该只绑定<a>标记

上的点击事件

App.DropView = Ember.View.extend({
  templateName: 'dropView',

  didInsertElement:function(){  
    this.$('a').click(function(){
       Ember.$("input[type='file'").click();
    });               
  },

  willDestroyElement:function(){
    this.$('a').off();
  }  
});

Ember - 使用View Click事件触发Click File元素的单击

2 个答案: