mousemove 与 click

JavaScript区分click事件和mousedown（mouseup、mousemove）方法

在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouseup事件.但mousedown.mouseup就会和click事件发生冲突.我们希望在拖拽元素的时候不希望它执行click方法,在执行click方法是不希望执行mousedown和mouseup方法. 比如如下代码,就会出现上面的问题: <!DOCTYPE html> <html> &

移动端为何不使用click而模拟tap事件及解决方案

移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser

第二十三课：jQuery.event.add的原理以及源码解读

本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99次绑定,更何况它还能监听将来添加的tr元素.这就是jQuery中的live方法. 这种机制使用的是事件冒泡机制实现的,我们把事件处理函数绑定在tr的父元素上,然后再tr上面触发的事件会冒泡到tr的父元素,因此父元素就可以触发这个事件处理函数,在事件处理函数中就可以通过这个event获取到事件源,然后

JS高级设计第七章——复习知识点

<!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.org/1999/xhtml"> <head> <meta http-equiv="Content-

html5 drag api详解

可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 diffX ,diffY 2.在mousedown中绑定 document的mousemove 以及mouseup 3.在mousemove中计算拖拽元素的位置: x = event.clientX - diffX ,y = event.clientY - diffY 4.mouseup时中销毁绑定的

JS 点击事件学习总结

废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在整理一下,方便之后的阅读和复习. 正文片: 1.PC上的点击事件. PC端用户通过鼠标和网页进行互动操作,此时我们用鼠标一类的事件的情况会有许多.因此在PC端我们多用mouse事件或者click事件来进行相关逻辑的编写. 事件的发生依照事件六中的先后顺序来进行的,对于鼠标垫额交互事件来说,事件的先后

jQuery编程基础精华03（RadioButton操作，事件，鼠标）

RadioButton操作取得RadioButton的选中值,被选中的radio只有一个值,所以直接用val() $('#btn1').click(function () { $(':radio:checked').each(function () {//遍历,因为只能获取一个 alert($(this).val()); }); }); $(

JQuery重要知识点

jQuery基本选择器----包括ID选择器,标签选择器,类选择器,通配选择器和组选择器5种 a. ID选择器: $("#id") b. 标签选择器:$("element") c. 类选择器:$(".className") d. 通配选择器:$("*") 匹配指定上下文中所有元素 e. 组选择器:$("selector1,selector2,selectorN") 特点:无数量限制,以逗号分隔 (逐个匹配,

event对象具有的方法

// dataTransfer,toElement,fromElement,y,x,offsetY,offsetX,webkitMovementY,webkitMovementX,relatedTarget,button,metaKey,altKey,shiftKey,ctrlKey,clientY,clientX,screenY,screenX,which,pageY,pageX,layerY,layerX,charCode,keyCode,detail,view,clipboardData,

移动开发之fastclick 点击穿透

穿透(点穿)是在mobile各种浏览器上发生的常见的bug.可能是由click事件的延迟(300ms)或者事件冒泡导致现象:在A页面中有个 btn1<或a标签>,在B页面中有个 btn2,btn1和btn1都在屏幕同一个位置,两个按钮都有绑有自己的点击事件.btn1的click事件触发后跳转到B页面.当btn1被点击后跳到B页面,btn2按钮的click事件也被触发了一般的解决方案如下: a. 使用fastclick,这个可以非常完美的解决点穿问题. b. 在touchend事件回调中加入

jQuery整理笔记5----jQuery大事

一.大事 1.载入中DOM $(document).ready() 这个第一节里具体介绍了 2.事件绑定 jQuery定义了bind()方法作为统一的接口.用来为每个匹配元素绑定事件处理程序.其基本的语法:bind(type,[data],fn); 当中參数type表示事件类型,參数data是可选參数,它能够作为event.data属性值传递给事件对象的额外数据对象.參数fn表示事件处理函数. 比例如以下例中为p元素绑定单击事件,当点击不同段落文本的时候会提示不同段落文本的内容: <!DOCTY

利用修改div的位置+js对象存储div信息实现简单的div自定义布局功能

原文:利用修改div的位置+js对象存储div信息实现简单的div自定义布局功能利用修改div的位置+js对象存储div信息实现简单的div自定义布局功能1.在界面上添加几个checkbox和一个接收动态添加div的容器 <div> 功能区域 <br /> <input id="1" type="checkbox" value="新闻" name="11" />新闻 <input

移动端touch点穿（穿透）解决办法

回答一穿透(点穿)是在mobile各种浏览器上发生的常见的bug.可能是由click事件的延迟或者事件冒泡导致. 移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug(Zepto的事件都绑在Document上). 解决方案 1.使用fastclick,这个可以非常完美的解决点穿问题. 2.在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none. 回答二移动端的click都是touch之后,才会模拟触发.

Echarts数据可视化tooltip提示框，开发全解+完美注释

全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolbox详解.legend详解.dataZoom详解.visualMap全解 5大坐标系详解(点击进入): 地理坐标系geo详解.grid直角坐标系(xAxis.yAxis)详解.parallel平行坐标系详解.polar极坐标系详解.radar雷达坐标系详解 19种图表类型详解(点击进入,待续): s

Echarts数据可视化全解注释

全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolbox详解.legend详解.dataZoom详解.visualMap全解 5大坐标系详解(点击进入): 地理坐标系geo详解.grid直角坐标系(xAxis.yAxis)详解.parallel平行坐标系详解.polar极坐标系详解.radar雷达坐标系详解 19种图表类型详解(点击进入,待续): s

Echars 6大公共组件详解

Echars 六大组件详解 : title tooltip toolbox legend dataZoom visualMap 一.title标题详解 myTitleStyle = { color: "#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 40

Jquyer相册

点击图片然后弹出相册列表,效果如下: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta

ECharts公共组件：title详解、 tooltip详解、toolbox详解、legend详解、dataZoom详解、visualMap全解

1. Title mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400.

Echarts全解注释

coordinate-geo.js文件为地理坐标系的配置参数 mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列 fontSi

faskclick

PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown.mouseup.mousemove和click事件.一次点击行为,事件的触发过程为:mousedown -> mouseup -> click 三步. 手机上没有鼠标,所以就用触摸事件去实现类似的功能.touch事件包含touchstart.touchmove.touchend,注意手机上并没有tap事件.手指触发触摸事件的过程为:touchstart -> touchmove -> touch

JQuery 学习总结及实例 !! （转载）

出自 new:http://www.jianshu.com/users/1967b163cb61/latest_articles 1.JQuery简介普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQ

mousemove 与 click

热门专题