详解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 相关文章推荐
jQuery autocomplete插件修改
Apr 17 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery form 加载数据示例
Apr 21 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP代码优化的53个细节
2014/03/03 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python tkinter实现连连看游戏
2020/11/16 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
判断单链表中是否存在环
2012/07/16 面试题
部队领导证婚词
2014/01/12 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
八项规定整改方案
2014/02/21 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
同学聚会祝酒词
2015/08/10 职场文书