Dom二级事件的回调函数种类不同导致this指向不同的问题

最新推荐文章于 2024-09-26 01:42:12 发布
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量285 收藏
点赞数 2
分类专栏： bug解决 文章标签： javascript vue js dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xunfengZ/article/details/109768474
版权
在Vue项目中遇到一个关于DOM事件监听的问题，涉及到事件回调函数的this指向。原本在页面渲染后的生命周期函数中添加的事件监听，由于使用普通匿名函数导致this指向window，无法访问到Vue实例的data属性fixed。通过将匿名函数改为箭头函数，使this正确指向Vue实例，从而能正确控制组件的吸顶效果。
摘要由CSDN通过智能技术生成

这两天在用vue脚手架写一个仿卖座网的项目练练手，在写到下滑时的吸顶效果时，无论如何调整都无法实现。效果如图：
在这里插入图片描述
控制组件是否吸顶的代码：

<FilmListTopNav :class="fixed ? 'fixed' : ''"></FilmListTopNav>

组件的data数据：

 data:function(){
最低0.47元/天 解锁文章
xunfengZ
关注
专栏目录
js的this指向总结
丑小鸭变黑天鹅的博客
11-25 1498
js的this指向总结一、说明一、全局环境下二、函数上下文调用1、普通函数调用1.1、 情况说明：2、作为方法来调用2.1、情况12.2、情况22.3、 情况33、作为构造函数来调用3.1、情况13.2、情况24、call,apply,bind5、Eval函数6、DOM 事件处理函数中的 this & 内联事件中的 this1、DOM事件处理函数2、内联事件3、setTimeout & setInterval7、箭头函数三、总结 一、说明 首先必须要说的是，其实this就是一个指针，它指示的
Web APIs day2 | Dom事件基础 (事件监听、事件对象、环境对象、回调函数)
csyldjy的博客
06-04 398
学习目标: 掌握事件绑定处理和事件对象，完成常见网页交互目录1 事件监听（绑定）1.1 事件监听1.2 拓展阅读-事件监听版本2 事件类型3 事件对象3.1 获取事件对象3.2 事件对象常用属性4 环境对象5 回调函数综合案例目标：能够给 DOM元素添加事件监听什么是事件？ 什么是事件监听？- 语法:- 事件监听三要素：如:注意： 1. 事件类型要加引号 2. 函数是点击之后再去执行，每次 点击都会执行一次案例 京东点击关闭顶部广告需求：点击关闭之后，顶部关闭分析：①：点击的是关闭按钮②：关闭的是父盒子核
DOM方法封装及回调函数的使用
欢欢的博客
05-11 260
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="css1.css" /> <script type=
DOM2级事件基础知识入门
z-ying-jian的博客
02-26 904
DOM2级事件是通过addEventListener添加事件的，IE8及以下是通过attchEvent DOM2绑定事件 box.addEventListener(&amp;amp;quot;click&amp;amp;quot;,callback,false); //IE8及以下 box.attachEvent(&amp;amp;quot;onclick&amp;amp;quot;,fn) 说明(addEventListener) 第一个参数：事件的类型（DOM0绑定
DOM事件中this的指向问题
hhhhhh__hh的博客
05-05 991
几种DOM事件绑定方式下的this指向 1 通过在标签中指定 方法1： <script> function test() { console.log(this); } </script> <button onclick="test()">点我</button> 结果指向window对象 方法2：将this传递给事件处理函数 <button onclick="test(this)">点我</butto
vue使用dom事件
qq_44989936的博客
07-16 348
vue原文 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法： <button v-on:click=“warn(‘Form cannot be submitted yet.’, $event)”> Submit </button> // … methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefaul
DOM事件相关总结
前端程序猿的博客
01-21 680
DOM事件相关总结 DOM事件模型和事件流 DOM事件捕获的具体流程 事件代理(事件委托) Event对象常见的应用
2023前端面试题总结：JavaScript篇完整版_箭头函数的this指向
m0_61331573的博客
04-20 1009
JavaScript 中的原型（prototype）和原型链（prototype chain）是理解对象和继承机制的关键概念。每个 JavaScript 对象都有一个关联的原型对象，它是一个普通对象，包含一些共享的属性和方法。当你访问对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 引擎会沿着对象的原型链去查找。对象可以通过 prototype 属性来访问它的原型对象。原型链是由一系列连接的原型对象组成的链。
jquery简单的二级下拉菜单.zip 带有完整的实例
11-15
`bind(this)`用于保持上下文，确保`$(this)`在回调函数中仍然指向当前的`.parent`元素。 在实际项目中，可能还需要考虑其他因素，如响应式布局、触摸设备的支持等。这个压缩包中的实例可能包含了更多细节和优化，你...
JS基础知识（十一）DOM0和DOM2级事件
qq_23389687的博客
05-02 1万+
JS中的DOM0和DOM2事件 JS中的事件基础及核心原理以及项目实战 事件的定义 事件绑定的两种方法 DOM0事件 常用事件汇总 事件对象 鼠标事件对象（mouseevent） 键盘事件对象(keyboardEvent) 手指事件对象（TouchEvent） 使用touchstart,touchmove,toucheend来处理移动端click事件300ms延迟问题 阻止事件的...
JS Dom元素的获取 事件 this
JS中字符串的操作
12-07 1515
#DOM元素获取： DOM：文本对象模型 document:dom对象 console.log(document);html 常规获取4个->动态元素获取DOM document.getElementsByClassName() document.getElementById() document.getElementsByName() document.getElementsB...
事件处理函数中的this
dlian的专栏
08-26 966
[color=red]这个问题我遇到过，但是我不是很明白下面的讲述-----ajax in action4.3.1[/color] 我们已经得到了一个DOM元素的句柄，分配了一个回调函数给onclick属性。当DOM元素收到鼠标点击事件时，回调即被调用。然而，函数上下文（即变量this所确定的值——参见附录B，可获得关于JavaScript Function对象的完整讨论）赋值为收到事件的D...
理解 JS 回调函数中的 this
weixin_30242907的博客
01-15 203
原文链接：http://www.tuicool.com/articles/z2Yvaq 任何变量或对象都有其赖以生存的上下文。如果简单地将对象理解为一段代码，那么对象处在不同的上下文，这段代码也会执行出不同的结果。 例如，我们定义一个函数getUrl和一个对象pseudoWindow。 function getUrl() { console.log(this.docum...
Vue报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
热门推荐
xunfengZ的博客
11-19 1万+
报错如图所示： 其原因是我从父组件向子组件传值时，用props接收之后，我在子组件中直接修改了接收的参数的值。 例如： //接收了两个参数：一个数组，一个字符串 props:["list","type"] ...... //做了一些修改,比如合并了一个新数组 this.list=this.list.concat(newList) 这时候再使用list这个数据就会报错。 原因： 由于Vue内部的机制，传入的props中的值 是不允许被修改的。在新的渲染机制中，当父组件重新渲染时，子组件都被会覆盖，这时的p
Vue中的报错：TypeError: Cannot read property ‘Name‘ of undefined
xunfengZ的博客
11-18 830
部分代码如下： //*************html代码部分 ....省略部分代码.... <div class="detail"> <div class="f-name"> <span class="name">{{film.name}}</span> <span class="type" >{{film.item.name}}</span>
记伪数组遍历时无法完整遍历的bug
xunfengZ的博客
10-29 349
今天在写购物车页面多选删除时遇到了一个之前从没在意过的bug。当我选中2个及以上的商品点击删除时，只能删除1个或者一小部分商品，这就让我很费解了：以前for循环遍历删除节点都没问题呀，今天的问题出在哪了呢？经过一系列排查，发现获取到的节点集合不能直接遍历，可能有时候会侥幸得到正确的结果，但是总有栽坑的时候。所以需要转为真数组之后再遍历。 示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="
$nextTick在项目中的用处
xunfengZ的博客
12-14 227
//组件 //swiper.vue <template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> </div> </template> .....省略不相关代码...... <script> import Swiper fro
如何搭建Vue脚手架
最新发布
w6437286的博客
09-26 492
本文主要讲解如何搭建vue脚手架。
dom0级事件和dom2级事件写法有什么不同吗？
05-26
DOM2级事件的写法是先通过`addEventListener`方法绑定事件处理函数，再通过`removeEventListener`方法移除事件处理函数。例如： ```javascript var btn = document.querySelector('button'); function handleClick...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值