详解angular2如何手动点击特定元素上的点击事件


Posted in Javascript onOctober 16, 2018

我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能.

有没有内置的方法来做到这一点? …..如果不是,请建议我该怎么做

考虑以下代码片段

<form [ngFormModel]="imgUploadFrm"
     (ngSubmit)="onSubmit(imgUploadFrm)">
    <br>
    <div class="input-field">
      <input type="file" id="imgFile" (click)="onChange($event)" >
    </div>
    <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button>
 </form>

这里当用户点击btnAdd它应该触发imgFile上的点击事件

Angular4

代替

this.renderer.invokeElementMethod(
    this.fileInput.nativeElement, 'dispatchEvent', [event]);

使用

this.fileInput.nativeElement.dispatchEvent(event);

因为invokeElementMethod不再是渲染器的一部分.

Angular2

使用 ViewChild 与模板变量来获取对文件输入的引用,然后使用 Renderer 调用dispatchEvent来触发事件:

import { Component, Renderer, ElementRef } from '@angular/core';
@Component({
 ...
 template: `
...
<input #fileInput type="file" id="imgFile" (click)="onChange($event)" >
...`
})
class MyComponent {
 @ViewChild('fileInput') fileInput:ElementRef;

 constructor(private renderer:Renderer) {}

 showImageBrowseDlg() {
  // from http://stackoverflow.com/a/32010791/217408
  let event = new MouseEvent('click', {bubbles: true});
  this.renderer.invokeElementMethod(
    this.fileInput.nativeElement, 'dispatchEvent', [event]);
 }
}

更新

由于Angular团队不再劝阻直接的DOM访问,所以也可以使用更简单的代码

this.fileInput.nativeElement.click()

参见 https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent

代码日志版权声明:

翻译自:http://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
jQuery实现高级检索功能
May 28 jQuery
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
iView框架问题整理小结
Oct 16 #Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 #Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 #Javascript
ajax与jsonp的区别及用法
Oct 16 #Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 #Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
javascript 函数使用说明
2010/04/07 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
代码详解javascript模块加载器
2018/03/04 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python中的引用知识点总结
2019/05/20 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
用python进行视频剪辑
2020/11/02 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
2016年情人节广告语
2016/01/28 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js