详解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 对象的创建与使用
Mar 09 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
axios基本入门用法教程
Mar 25 Javascript
深入理解node.js之path模块
May 03 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
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
php中数据的批量导入(csv文件)
2006/10/09 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP中header用法小结
2016/05/23 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
解析Python中while true的使用
2015/10/13 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
关于python中的xpath解析定位
2020/03/06 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Python必须了解的35个关键词
2020/07/16 Python
python与idea的集成的实现
2020/11/20 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
成考报名单位证明范本
2014/01/16 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
结婚通知短信怎么写
2015/04/17 职场文书