addEventListener 的第三个参数capture、once、passive

最新推荐文章于 2024-08-27 15:41:08 发布

skaier

最新推荐文章于 2024-08-27 15:41:08 发布

阅读量2.6k

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/skaier/article/details/113345180

版权

在处理canvas手势绘制的手机端页面时，为解决页面抖动问题，可以采用addEventListener函数，并利用其第三个参数，如passive属性，来控制页面滑动。这能有效改善用户体验。

摘要由CSDN通过智能技术生成

做网页canvas手势绘制的时候，手机端页面会有抖动。
解决方案在手机端加个锁定的按钮。并用addEventListener 的passive属性来控制页面的滑动。

 var lockflag = false;
 function movebody(e) {
   
     e.preventDefault();
 }
 if (device.mobile(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

skaier

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

详解addEventListener的三个参数之useCapture

01-21

第三个参数为 useCapture，本文就讲解它。代码如下: ”outDiv”> ”middleDiv”> ”inDiv”>请在此点击鼠标。 ”info”> 代码如下: var outDiv = document.getElementById(“outDiv”); var middleDiv ...

addEventListener的第三个参数

huxin1的专栏

11-10

2255

W3C DOM里用来新增触发事件的函数叫AddEventListener ，不过我一直不知道这个函数的第三个参数是要做什么用的，总是随便设，也没发现差异再哪，前两天看ppk on javascript终于看到说明了，至于很久以前就有的DOM的标准文件，我其实根本没去找过这个参数的资讯。這個參數叫做useCapture ，是一個boolean值，就是true or false，如果送出tru

参与评论您还未登录，请先登录后发表或查看评论

addEventListener 第三个参数

阿拉斯加头头的博客

04-22

2159

addEventListener 方法的第三个参数可以是一个布尔值、一个对象，或者是省略不填。

WHAT - addEventListener 的 options 的 passive 属性配置

最新发布

weixin_58540586的博客

08-27

946

在其中 options 的含义：An object that specifies characteristics about the event listener.captureoncepassive第三个属性passive就是我们今天要讨论的东西。passive是的一个选项，用于指定事件监听器是否应该被认为是“被动的”。这是一个比较高级的选项，可以帮助优化性能，特别是在处理滚动事件时。passive。

深入理解 addEventListener

Kate_sicheng的博客

07-10

6826

参数一：事件类型，比如 click、mouseenter、drag等。参数二：事件被触发时的回调函数。options对象：useCapture: 默认值为false，事件将在冒泡阶段触发。如果为true，事件将在捕获阶段触发。once: 表示 listener 在添加之后是否最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。passive: 设置为 true 时，表示 listener 永远不会调用 preventDefault......

JavaScript 中添加事件函数 addEventListener 的介绍

hongtoushan的博客

04-15

569

在addEventListener事件委托中第三个参数，可以设置为bool类型（useCapture）或者object类型(options)。 object类型(options)包括三个布尔值选项 capture：true使用事件捕获；false使用事件冒泡（默认值） once：true只调用一次，在调用后自动销毁listener；false可以多次调用（默认值） passive:不同浏览器默认值不同。 true监听函数listener永远不调用preventDefault方法。根据规范，默

addEventListener参数和冒泡和捕获详细使用与说明

dupha的博客

04-30

6037

addEventListener第三参数冒泡和捕获详细说明 1.addEventListener参数说明 target.addEventListener(type, listener, useCapture); 参数一: type 表示监听事件类型的字符串。参数二: listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅事件监听回调

结合js中的addEventListener()去理解vue中的事件修饰符

时清云的博客

08-22

1179

为什么要写这篇文章呢？是因为在看vue官方文档时，看到了事件修饰符这一块。我们都知道vue中的事件修饰符总共有6种，包括.stop、.prevent、.capture、.once、.self、.passive。对于它们的含义和使用，我就不做描述了，可以看我的这一篇文章：vue中的事件修饰符.self、.capture和.passive 。主要是结合addEventListener去理解.capture、.once、.passive等的实现原理。 1、先看一下addEventListener的用法 eleme

addEventListener()第三个参数useCapture (Boolean)详细解析

09-04

3. **useCapture**：第三个参数是一个可选的布尔值，默认为 `false`。如果设置为 `true`，事件处理程序将在捕获阶段执行；如果为 `false`，则在冒泡阶段执行。捕获阶段从最外层的祖先元素开始，向下到目标元素；冒泡...

window.addEventListener来解决让一个js事件执行多个函数

10-27

第三个参数`useCapture`在此处通常设为`false`，表示在冒泡阶段调用事件处理函数。此外，对于DOM元素的事件处理，如按钮点击事件，也可以使用相同的方法。例如，对于一个ID为"btn1"的按钮，我们希望在点击时执行`...

addeventlistener事件第三个参数_【JavaScript 教程】事件——EventTarget 接口

weixin_39862484的博客

11-27

454

作者 | 阮一峰事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。概述DOM 的事件操作(监听和触发)，都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象(比如，XMLHttpRequest、AudioNode、AudioContext)也部署了这个接口。该...

addEventListener与事件捕获、事件冒泡

TTYLXWT的博客

06-16

2586

addEventListener与事件捕获、事件冒泡： addEventListener的基本用法项目开发中，javascript和html的解耦变得至关重要，我们被推荐使用事件动态绑定的方式来处理按钮的事件。W3C为我们提供了addEventListener()函数用来为指定的 dom元素动态绑定事件。这个函数有三个参数： type:用来设置事件类型，例如click。 listener:用来设置监听事件的函数，及type类型的事件发生后执行的函数。大部分情况下，确切的说是我们绑定事...

addEventListener语法

前端小白的博客

10-16

121

当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。备注：对于事件目标上的事件监听器来说，事件会处于“目标阶段”，而不是冒泡阶段或者捕获阶段。捕获阶段的事件监听器会在任何非捕获阶段的事件监听器之前被调用。可选一个指定有关 listener 属性的可选参数对象。表示监听事件类型的大小写敏感的字符串。

关于addEventListener的使用和注意项

yiguoxiaohai的博客

06-19

1590

关于addEventListener的使用和注意项

addeventlistener事件第三个参数_一篇文章能否解决你事件监听的许多疑问

weixin_39569894的博客

11-27

337

前言：此篇文章稍长，请您用心阅读，完后我相信会解决你许多疑惑。我们以一个 toy demo 开始.// dom level -> div (onclick) -> p -> span问题：为什么当我们点击<p>, <span> click 事件也触发了？Bubbling（冒泡）冒泡是事件的一种传递机制，当一个...

事件触发一次

前端踩坑之路

02-03

470

vue 中实现大家都知道，vue 中在事件处理程序中提供了事件修饰符 stop prevent once  <a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.

addEventListener 有三个参数

终日而思不如须臾所学。

01-01

4406

addEventListener有三个参数：事件名称；事件处理函数；捕获还是冒泡。事件处理函数不一定是函数，也可以是个JavaScript具有handleEvent方法的对象，看下例子： var o = { handleEvent: event => console.log(event) } document.body.addEventListener(“keydown”, o, false); 第三个参数不一定是bool值，也可以是个对象，它提供了更多选项。 once：只执行一次。 pass

addEventListener(event, function, useCapture) 简记

u011927449的博客

06-05

695

监听事件方法：addEventListener(<event-name>, <callback>, <use-capture>) 移除监听事件方法：removeEventListener(event, function) 其中 addEventListener(event, function, useCapture) 有三个参数，分别代表：第一个参数 event-name (String)：所要监听的事件名称或类型，　　如：鼠标事件(mousedown, mouseu

jQuery Mobile事件，开发全解+完美注释

全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio

08-05

3000

//使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行 $(document).on("pagecreate","#pageone",function(){ // jQuery 事件... }); //点击事件 $("p").on("tap",function(){ $(this).hide(); }); //长按事件点击不放（长按）事件在点击并不放（大约

self.addEventListener 的第三个参数详解

03-07

self.addEventListener是在JavaScript中用于注册事件监听器的方法。它接受三个参数，分别是事件类型、回调函数和选项对象。 第三个参数是一个可选的选项对象，用于配置事件监听器的行为。该选项对象可以包含以下属性： 1. capture：一个布尔值，表示事件是否在捕获阶段进行处理。默认为false，即在冒泡阶段处理事件。 2. once：一个布尔值，表示事件是否只触发一次。默认为false，即事件可以多次触发。 3. passive：一个布尔值，表示事件监听器是否为被动的。被动的事件监听器不会调用preventDefault()方法来阻止默认行为。默认为false。这些选项可以根据需要进行配置，以满足特定的事件处理需求。