首页 / JAVASCRIPT / js中点击事件与常用的事件（pc端和移动端）概述

js中点击事件与常用的事件（pc端和移动端）概述

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js中点击事件与常用的事件（pc端和移动端）概述，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3587字，纯文字阅读大概需要6分钟。

内容图文

1.点击事件：

在pc端是点击事件，但是在移动端是单击事件，在移动端的项目中我们经常会区分单击做什么和双击做什么，所以移动端的浏览器在识别click的时候，只有确定是单击后才会把它执行，在移动端使用click会存在300ms的延迟:浏览器在第一次点击结束后，还需要等到300ms看是否触发了第二次点击，如果触发了第二次点击就不属于click了，没有触发第二次点击才属于click

但是，在某些场景下需要取消延迟：（1）静止缩放：使用这个方法必须完全禁用缩放来达到目的，虽然大部分移动端能解决这个延迟问题，但是部分苹果手机还是不行；

width - viewport的宽度； height - viewport的高度；initial-scale - 初始的缩放比例； minimum-scale - 允许用户缩放到的最小比例； maximum-scale - 允许用户缩放到的最大比例；user-scalable - 用户是否可以手动缩放

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

（2）fastclick.js： FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉

第一步：在页面中引入fastclick.js文件。
第二步：在js文件中添加以下代码：在 window load 事件之后，在body上调用FastClick.attach()即可。

window.addEventListener(function(){   
    FastClick.attach( document.body );  
},false );

如果你项目使用了JQuery，就将上面的代码改写成：

$(function() {    
    FastClick.attach(document.body);    
});

替换移动端的click事件：

（1）使用touchstart :touch事件包括touchstart、touchend、touchmove等，简单使用touchstart来替换click，但问题是，如果我想在同一对象上绑定一个单击事件和一个滑动事件怎么办，这时候就会出现冲突;在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend -->click

touch事件的模型：

事件名	作用
touchstart	手指按到屏幕上
touchmove	手指在屏幕上滑动
touchend	手指离开屏幕
touchcancle	特殊情况下关闭/退出时触发

touch事件的属性：

属性名	作用
type	事件类型
target	事件源
preventDefault（returnValue）	阻止默认行为
stopPropagation（cancleBubble）	停止事件的传播
touches[0].clientX	触碰位置的x值
changedTouches	当前的值和离开的值

（2）tap事件：标准事件中没有tap事件，tap事件是一些库，如zepto，使用touch进行封装的，在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置且时间间隔较短，且过程中未曾触发touchmove事件，则调用回调函数；过300ms后还是会产生click事件，只是在该对象上没有进行监听，由此产生了“点透”现象： 1）页面弹出一个模态框，模态框上有个按钮（关闭模态框），按钮正下方（在主页面上）有一个输入框；2）当点击模态框上的关闭按钮，模态框立即消失，但300ms后click事件触发，而输入框正好监听click事件，因此输入框会得到焦点

pc端常用的事件：

事件名	作用
click	当鼠标点击时触发
mouseover	当鼠标指针移动到元素上时触发
mouseout	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发（不支持冒泡）
mouseleave	当鼠标指针移出元素上时触发（不支持冒泡）
mousemove	当鼠标指针移动到元素上时触发
mousedown	当元素上按下鼠标按钮时触发
mouseup	当在元素上释放鼠标按钮时触发
mousewheel	当鼠标滚轮正在被滚动时运行的脚本
keydown	在用户按下按键时触发
keyup	当用户释放按键时触发
load	页面结束加载之后触发
scroll	当元素滚动条被滚动时运行的脚本
blur	元素失去焦点时运行的脚本
focus	当元素获得焦点时运行的脚本
change	在元素值被改变时运行的脚本

移动端常用的事件：

事件名	作用
click	当点击时触发（单击）
load	页面结束加载之后触发
scroll	当元素滚动条被滚动时运行的脚本
blur	元素失去焦点时运行的脚本
focus	当元素获得焦点时运行的脚本
change	在元素值被改变时运行的脚本
input	代替keyup、keydown
touch事件模型	处理单手指操作
gesture事件模型	处理多手指操作

内容总结

以上是互联网集市为您收集整理的js中点击事件与常用的事件（pc端和移动端）概述全部内容，希望文章能够帮你解决js中点击事件与常用的事件（pc端和移动端）概述所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285388.html

来源：【匿名】

【上一篇】JavaScript单线程异步加载的三种方案【下一篇】javascript 怎么调用php方法

更多 ►

【js中点击事件与常用的事件（pc端和移动端）概述】教程文章相关的互联网学习教程文章

JavaScript addEventListener()事件监听方法【代码】

文章链接：https://www.cnblogs.com/jc2182/p/11307165.htmladdEventListener()方法将事件处理程序附加到指定的元素。addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。addEventListener()方法可以更容易地控制...

JavaScript事件处理学习（2）—单选按钮复选框下拉框操作【代码】【图】

1 <html>2 <head>3 <title>dsd</title>4 <script language="JavaScript">5function show1(){6var name=document.myform.name.value //保存姓名 7 alert("姓名"+name);8var sex; //保存性别 9if(document.myform.sex[0].checked){ //如果第一个元素被选中10 sex=document.myform.sex[0].value; 11 }else {sex=document.myform.sex[1].value;} 12 alert("性别"+sex); 13var ints=...

【Javascript】重新绑定默认事件【代码】

更多内容，请移步 JSCON-简时空在有一种场景下，你想先屏蔽掉默认的系统事件，而在特定条件下又重新绑定回去。【场景】H5页面，动画欢迎界面，共6帧；想在前5帧中屏蔽掉默认的touchmove事件，在第6帧是表单页面，想恢复系统默认的touchmove——这样用户可以自由拖拽页面，浏览完整的表单信息原生JS：目前我所能想到的最简单粗暴有效的方法是这样的：（没错，it works） document.ontouchmove = function(e){returnfalse;}...

javaScript事件【代码】

JavaScript通过事件与HTML交互。事件流事件流规定了事件的触发规则和顺序。DOM2规定了事件流包括三个阶段：事件捕获 -> 目标触发除 -> 事件冒泡。DOM2规定在事件捕获阶段不应调用事件处理程序，不过各大浏览器都不鸟它。DOM2级的事件处理程序操作函数对：addEventListener和removeEventListener的第三个参数则把这种事变成了DIY，这是一种妥协，同时让初学者认为dom的管理一片混乱。var btn = document.getElementById("btn"); btn...

JavaScript 触发click事件兼容FireFox，IE 和 Chrome【代码】

解决了火狐下无法触发click事件的问题<script language="javascript">function test2(name){if(document.all){document.getElementById(name).click();}else{var evt = document.createEvent("MouseEvents");evt.initEvent("click", true, true);document.getElementById(name).dispatchEvent(evt);}} </script><a href="#" id="a3" onclick="location.href = ‘http://www.baidu.com‘;">baidu</a> <input type="button" value="c...

javascript事件代理(delegate)原理解析【代码】【图】

什么是事件代理？首先得知道什么是事件，并且弄清楚事件流，才能真正明白事件代理原理。一、什么是事件？　　javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。如onload、onclick、onmouseup、onmousedown... 。二、事件流　　DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

JavaScript事件对象EventUtil【代码】

JS中事件对象有很多种，兼容性参差不齐，这个对象封装了大部分所需的各种方法var EventUtil={addHandler:function(element,type,handler){ //添加事件if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件}elseif(element.attachEvent){ //使用IE方法添加事件element.attachEvent("on"+type,handler);}else{element["on"+type]=handler; //使用DO...

JavaScript事件(含Demo)【代码】

主要事件:　　onclick　　鼠标单击事件　　onmouseover 鼠标经过事件　　onmouseout　　鼠标移开事件　　onchange　　文本框内容改变事件　　onselect　　文本框内容被选中事件　　onfocus　　光标聚集　　onblur　　光标离开　　onload　　网页导入　　onunload　关闭网页 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title> 事件</title> 6<script type="text/javascript"> 7function count(){8 9var result="...

JavaScript事件处理程序

一、HTML事件处理程序作用域为元素所在的作用域function showMessage(){　　alert("showMessage");}<input type="text" value="Click" onclick="alert(‘Click‘)" ><input type="text" value="Click" onclick="showMessage()" > 二、DOM0级事件处理程序作用域为元素所在的作用域var btn = document.getElementById("btn");btn.onclock = function(){　　alert("click");} //删除事件btn.onclick = null;三、DOM2级事件处理程序作用...

JavaScript - 函数、对象、事件、字符串（三）【代码】

JS 函数JS 函数是被设计为执行特定任务的代码块JS 函数会在某代码调用它时被执行JS 函数语法JS 函数通过 function 关键词进行定义，其后是函数名和括号()函数名可包含字母、数字、下划线、美元符号（规则与变量名相同）括号内是参数列表，多个参数之间使用逗号分隔：(参数1，参数2，参数3...)由函数执行的代码被放置在花括号中：{...}function functionName(var1,var2,var3,...){//执行代码//return ... } JS 函数调用当事件发生时...

JavaScript利用闭包循环绑定事件【代码】

我们经常在做前端面试题的时候，会遇到循环绑定事件后，输出打印结果，很多人总是搞不清楚，今天借此机会跟大家梳理一下闭包相关作用。1.首先我们举一个简单的例子。html部分：<a href="#">首页</a> <a href="#">作品</a> <a href="#">文章</a> <a href="#">工具</a> <a href="#">招聘</a> <a href="#">赛事</a> <a href="#">更多</a>js部分：var a = document.getElementsByTagName("a"); for(var i =0; i<a.le...

javascript阻止事件冒泡和浏览器的默认行为【代码】

1.阻止事件冒泡,使成为捕获型事件触发机制.1function stopBubble(e) { 2//如果提供了事件对象，则这是一个非IE浏览器 3if ( e && e.stopPropagation ) 4//因此它支持W3C的stopPropagation()方法 5 e.stopPropagation(); 6else7//否则，我们需要使用IE的方式来取消事件冒泡 8 window.event.cancelBubble = true; 9 }2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为. 1//阻止浏...

Js事件分发与DOM事件流【图】

这一篇比较透彻：https://www.jianshu.com/p/dc1520327022 点击了目标节点后，捕获阶段里事件会从外向目标传递；到了目标阶段，捕获和冒泡的执行顺序按照事件被定义的先后顺序执行；最后冒泡阶段，又会由目标向外进行传递。原文：https://www.cnblogs.com/youzi-xuchongyou/p/11636244.html

[原创]Javascript 利用mousetrap.js进行键盘事件操作【图】

我们日常开发中，会遇到js的键盘操作，例如回车提交表单之类的。或者按下某个键执行某个方法。无意中发现一个大小不到4K的js文件，它非常方便的操作键盘事件。自己也尝试了一下：具体代码如下：详情可以去其逛网查看其API并下载，地址：http://craig.is/killing/mice<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3...

首页 / JAVASCRIPT / js中点击事件与常用的事件（pc端和移动端）概述

js中点击事件与常用的事件（pc端和移动端）概述

内容导读

内容图文

内容总结

内容备注

内容手机端

【js中点击事件与常用的事件（pc端和移动端）概述】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程