展开

关键词

dom啦13

body>

<script type="text/javascript"> let qq= document.querySelector("div"); // qq.onmouseenter=function() { console.log(""); } // qq.onmouseleave =function() { console.log(""); } qq.onmousemove=function() { console.log (""); } </script> </body> </html>

11820

jQuery第三十篇

/jquery-1.10.1.min.js"></script> </head> <body> <script> /* mouseover/mouseout , 子元素被也会触发父元素的 */ $(function() { /* $(".father").mouseover( function () { console.log("father被了"); }); $(".father").mouseout (function () { console.log("father被了"); }); */ /* mouseenter/mouseleave, 子元素被不会触发父元素的 推荐大家使用 */

21410
  • 广告
    关闭

    腾讯云精选爆品盛惠抢购

    腾讯云精选爆款云服务器限时体验20元起,云数据库19.9元/年起,还有更多热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS示例01-鼠标

    一、知识要点 1、匿名函数 2、鼠标 3、document.getElementById() 4、window.onload 5、行间提取 二、源码参考 <!

    1.2K20

    杨老师课堂之JavaScript悬浮(鼠标

    今天给大家分享一个简单的JavaScript案例: 该属于悬浮 改代码逻辑非常简单,主要是 当鼠标动到按钮上显示一个盒子,开之后盒子隐藏 JavaScript中     onmouseover 代表的是鼠标指针动到指定的对象上时发生某个动作;     onmouseout   代表的是鼠标指针该指定的对象上时发生某个动作; xxxx.style 代表一个单独的样式声明 display xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>鼠标显示或隐藏的悬浮 background:#ccc; border:1px solid #000; display:none; } </style> </head> <body> <button id="btn">动鼠标到按钮会有盒子显示或隐藏 .获取标签元素 var oBtn=document.getElementById('btn'); var oBox=document.getElementById('box'); //2.书写

    63330

    Javaweb鼠标案例分析—鼠标表格颜色变化

    最近在学习JavaWeb时,有用到鼠标,所以今天在这里记录一个相关的案例,同时也是对相关知识的一个巩固,效果为在鼠标动到表格对应行列时,该行列的背景颜色发生变化。 效果如下: ? 触发后,才会触发onmouseover。 在按钮上:onmousemove和onmouseover都不区分鼠标按钮 在动作上:onmouseover是在鼠标刚区域的时候触发,onmousemove是除了鼠标区域时触发外,鼠标在区域内动同样也会触发 两者区别:当鼠标过当前对象区域时就产生了onmouseover,所以onmouseover有个的过程,当鼠标在当前对象区域上动时就产生了onmousemove,只要是在对象上动而且没有对象的 onmouseout则是在鼠标对象区域时触发。

    31240

    dom啦14 菜单

    14020

    05动端

    一、动端三大          1、手指按下     ontouchstart      2、手指触摸     ontouchmove           3、手指抬起     ontouchend //注意:在动开发时,浏览器模拟器时好时坏,一般不用onX的方式绑定函数,要用绑定的方式(即第二种) div.ontouchstart = function(){}; div.addEventListener ('touchstart', function(){}); 二、PC端动端(现的问题)      1、PC端动端略慢,大概300ms左右      2、阻止PC document.addEventListener (当给某元素加上绑定函数之后,函数默认第一个参数就是对象。 :位于当前 DOM 元素上(当前dom元素之外的无法获取)的手指的列表      3、changedTouches:涉及当前的手指的一个列表      例子:动端无缝轮播切换

    33150

    动端详解

    关于动端的一些笔记 动端类型 touchstart touchmove touchend 动端对象 touches 屏幕上有几个触点 targetTouches 绑定的元素上有几个触点 changedTouches 在屏幕上 改变(位置动 离开 进 )的触点的个数(如果手指离开屏幕 只有changedTouched有值 其他都没有) 获取触点坐标 clientX ,我们把PC端的网页放到了动端,苹果公司把PC端的网页进行了缩放,发明了一种浏览缩放网页的处理方案 ,就是双击放大,第一次点击会延迟300ms左右,然后判断,如果有第二次点击,就是放大,如果没有,就是点击 script> // 1.声明变量 var startX, startY, endX, endY, absX, absY; // 2.给document添加touchstart 给document添加touchend document.addEventListener("touchend", function (e) { var touches = e.changedTouches

    30720

    动端触屏

    触屏概述 动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是动端也有自己独特的地方。 触屏可响应用户手指(或触控笔)对屏幕或者触控板操作。 常见的触屏如下: ? 2. 触摸对象(TouchEvent) TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的。 这类用于描述一个或多个触点,使开发者可以检测触点的动,触点的增加和减少,等等 touchstart、touchmove、touchend 三个都会各自有对象。   targetTouches[0] 里面的pageX 和 pageY 动端拖动的原理:    手指动中,计算手指动的距离。

    48030

    10-动端开发教程-动端

    在前端的动Web开发中,有一部分只在动端产生,如触摸相关的。接下来给大家简单总结一下动端的。 1. PC端动端的兼容问题 1.1 click的200~300ms延迟问题 由于动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引了双击缩放功能 动端特有的touch 由于动端设备大都具备触摸功能,所以动端浏览器都引了触摸(touch)。 当一些更高级别的发生的时候(如电话接或者弹信息)会取消当前的touch操作,即触发touchcancel。 如何用户的手指从触屏设备的边缘了触屏设备,也会触发 touchend 。 touchend 的 target 也是与 touchstart 的 target 一致,即使已经了元素。

    1.2K80

    10-动端开发教程-动端

    PC端动端的兼容问题 1.1 click的200~300ms延迟问题 由于动端默认的布局视口宽度是980像素,所以网页文字非常小,为了快速让网页还原到原来的大小,Safari最新引了双击缩放功能 动端特有的touch 由于动端设备大都具备触摸功能,所以动端浏览器都引了触摸(touch)。 touchcancel 当一些更高级别的发生的时候(如电话接或者弹信息)会取消当前的touch操作,即触发touchcancel。 2.4 touchend ​ 当用户的手指抬起的时候,会触发 touchend 。如何用户的手指从触屏设备的边缘了触屏设备,也会触发 touchend 。 touchend 的 target 也是与 touchstart 的 target 一致,即使已经了元素。 ?

    1.1K70

    JQuery绑定、动画

    绑定:bind()、on()、live()、delegate()、keyup(); 触发:trigger(‘keyup’)、keyup(); 解绑:unbind()、off()、die ()、undelegate(); 符合:hover() 、toggle(); 绑定:bind(); ---- 一、绑定       JQuery绑定,除 bing() 方法之外 /2013/0905/5993.html 二、 (a)使用 unbind() 方法 $("button").click(function(){ $("p").unbind 提供了一系列显示动画效果的方法,其中, show() ——— 方法控制元素的显示; hide() ———-方法控制元素的显示; toggle() ——-方法切换元素的可见状态; fadeIn() ——-方法淡; fadeOut() ——方法淡; slideUp()——方法实现元素的收缩 slideDown()—方法实现元素的展开 ----

    13610

    js动端中touch

    触摸是在动设备(如智能手机或平板电脑)上查看页面时触发的。 它们允许您跟踪多点触摸。 我们有4个触摸: touchstart 触摸已经启动(触摸表面) touchend 一个触摸已经结束(表面不再被触摸) touchmove 触摸动手指(或任何接触设备的东西)在表面动 touchcancel 触摸已被取消 每当一个触摸发生,会触发一个触摸: const link = document.getElementById('my-link') link.addEventListener ('touchstart', event => { // touch event started }) 以下是我们可以访问该的所有属性: identifier 标识符此特定的唯一标识符。 用于跟踪多点触摸。相同的手指=相同的标识符。

    38720

    AngularJS实现鼠标显示,鼠标隐藏

    http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview

    85130

    动端click300ms延迟

    动端click 延迟300ms ---- 一般情况下,如果没有经过特殊处理,动端浏览器在派发点击的时候,通常会现300ms左右的延迟。 css touch-action 指针(Point Event)最初由微软提,现已进 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。 指针是一个新的 web 系列,相应的规范旨在使用一个单独的模型,对所有输类型,包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等,进行统一的处理。 如果你比较感兴趣,想深指针,那上述 polyfill 就非常适合应用到手头的项目中。 指针和css touch-action:新属性,可能存在浏览器兼容问题,如仅为解决点击延迟问题儿引一整套指针有点过了。

    1.2K21

    react除监听无效

    问题描述 首先先来复现一下代码,背景是这样的,需要监听一下scroll,但是监听函数需要当前组的this环境,所以监听函数上需要bind(this), 但是这样操作后发现无法removeEventListener addEventListener、removeEventListener与处理程序 首先先来了解一下这两个函数的使用。 addEventListener()和removeEventListener()是“DOM2级”中定义的两个方法,分别用于添加和删除处理程序。 所有的DOM节点中都包含这两个方法,并且它们都接受3个参数:要处理的名、要为添加的处理程序的函数和一个表示处理阶段的布尔值。 我想看到了上图的输结果,大家应该明白了为何加上bind之后会无法除监听了,其根源就在于每次加上bind之后返回的函数并不是指向同一个函数 解决方案 既然明白了原因所在,那么我们来说一下如何解决。

    1.2K20

    动端」touch,touchEvent对象

    一、touch类型 touchstart - 手指触摸屏幕,在元素上按下时触发 touchmove - 手指动,在元素上按下之后屏幕上任意动 tounchend - 手指在元素上按下之后,屏幕任意位置抬起时触发 touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 与mouse区别: touchstart:手指按下,mousedown:鼠标按下。 touch:只能在动端使用,mouse :只能在 PC 端使用。 touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕的任意位置执行。 很多情况下,触摸跟鼠标会同时触发,目的是为了在pc端运行的时候,没有触摸设备可以使用鼠标代替。 如果可以支持触摸,则把鼠标使用event.preventDefault()阻止发生,此时鼠标将失效。如果鼠标和触摸都支持时,还有添加多个触摸时,具体的执行顺序是怎么的?

    22620

    动端」touch,touchEvent对象

    一、touch类型 touchstart - 手指触摸屏幕,在元素上按下时触发 touchmove - 手指动,在元素上按下之后屏幕上任意动 tounchend - 手指在元素上按下之后,屏幕任意位置抬起时触发 touchcancel - 触摸过程中被系统取消时触发 (很少使用) touch 与mouse区别: touchstart:手指按下,mousedown:鼠标按下。 touch:只能在动端使用,mouse :只能在 PC 端使用。 touchstart: 只能在绑定元素内按下触发,touchmove、touchend可以在屏幕的任意位置执行。 很多情况下,触摸跟鼠标会同时触发,目的是为了在pc端运行的时候,没有触摸设备可以使用鼠标代替。 如果可以支持触摸,则把鼠标使用event.preventDefault()阻止发生,此时鼠标将失效。如果鼠标和触摸都支持时,还有添加多个触摸时,具体的执行顺序是怎么的?

    15230

    相关产品

    • 事件总线

      事件总线

      腾讯云事件总线(EB)是一款安全,稳定,高效的无服务器事件管理平台,支持腾讯云服务、自定义应用、SaaS应用以标准化、中心化的方式接入,帮助您轻松实现无服务器事件驱动架构。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券