首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS总是使用mousedown获取相同的事件对象"e“参数

在JavaScript中,mousedown事件是鼠标按下按钮时触发的事件。当使用mousedown事件处理程序时,通常会传递一个事件对象作为参数,通常被命名为"e"或"event"。这个事件对象包含了关于事件的详细信息,比如鼠标按钮、鼠标位置等。

然而,如果在多次使用mousedown事件处理程序时,每次都获取到的事件对象都是相同的,可能是因为在事件处理程序中使用了事件委托(event delegation)的方式。

事件委托是一种常用的技术,它允许我们将事件处理程序绑定到一个父元素上,而不是绑定到每个子元素上。当子元素上的事件触发时,事件会冒泡到父元素,然后通过检查事件的目标(event.target)来确定哪个子元素实际触发了事件。

如果使用事件委托,并且在事件处理程序中使用了"e"参数来获取事件对象,那么无论事件来自哪个子元素,都会传递相同的事件对象。这是因为事件对象是在事件触发时创建的,而不是在事件处理程序绑定时创建的。因此,每次事件触发时,都会传递同一个事件对象。

要解决这个问题,可以使用事件对象的属性来获取触发事件的具体元素。例如,可以通过event.target来获取事件的目标元素,或者通过event.currentTarget来获取绑定事件处理程序的元素。通过这些属性,可以在事件处理程序中动态地获取事件相关的元素信息。

总结一下,当使用mousedown事件处理程序时,如果每次获取到的事件对象都是相同的,可能是因为使用了事件委托的方式,并且在处理程序中使用"e"参数来获取事件对象。此时,可以通过事件对象的属性来获取触发事件的具体元素,进而获取所需的元素信息。

相关链接:

  • mousedown事件:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mousedown_event
  • 事件委托:https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98
  • event.target属性:https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target
  • event.currentTarget属性:https://developer.mozilla.org/zh-CN/docs/Web/API/Event/currentTarget
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS获取事件对象获取事件对象(Firefox,IE)

做笔记,以防自己忘记~~ JS获取事件event,不同浏览器有不同做法。 例如IE下,在js函数中,通过window.event就可以获取,不必在函数中添加什么参数。...也可以用Prototype或者JQuery等,它们有他们对事件包装。还是使用JS库比较好,不然就有下边麻烦。...注意获取标记都以大写表示,如"TD","TR","A"等。所以把看过一些抄下来,不记得时候再来看看。...在 ie中处理事件直接使用window.event对象即可,但在firefox中,是没有 window.event对象,函数需要使用事件时候,需要在事件发生时把事件作为参数传递给函数,不象在ie...中,事件对象是全局,随处都可以访 问.下面这个getEvent()函数可以兼容firefox和ie,只需要在访问事件对象函数开始调用getEvent()即可,不用再把事件作为 参数传递.以下代码已经实验通过

10.1K50
  • jQuery进阶前言

    5、focusin()和focusout()事件: focusin()是获取焦点事件。比如有一个输入框,要在该输入框输入文字,我们首先得用鼠标点一下该输入框,这就叫获取焦点。...3、$.getScript(): 用法和$.getJSON()基本一样,区别在于url不是返回json格式数据url,而是指向一个js文件,比如statis/js/sport.js,还有就是没有data...4、$.get(): 使用get()方法时,采用GET方式向服务器请求数据,并通过方法中回调函数参数返回请求数据,它调用格式如下: $.get(url,function(data){...})...6、$.ajax(): 使用ajax()方法是最底层、功能最强大请求服务器数据方法,它不仅可以获取服务器返回数据,还能向服务器发送请求并传递数值,也是最常用。...它调用格式如下: $.ajax([settings]) 其中参数settings为发送ajax请求时配置对象,在该对象中,url表示服务器请求路径,data为请求时传递数据,dataType

    2.4K20

    js使用idx模块方便获取链条式对象属性值

    背景 从一个js对象属性值中属性再次获得值,或者从集合中获得元素再获得属性值要写很多判断是否空表达式,才能继续读取,否则就出现异常。...这在开发过程很繁琐事情,idx 模块就是来解决这个问题可选方案之一。...2.知识 ' idx '是一个用于遍历对象和数组上属性实用函数。 如果中间属性为空或未定义,则返回空。idx 目的是简化从链中提取属性值过程,省得每次写各种判空条件以方便开发。...idx 这个模块是作为权宜之计存在,因为JavaScript目前还没有直接可选“链条式读取属性支持”。...扩展 安装 $ npm install idx babel-plugin-idx 配置 在 Babel 里使用时,要配置:babel-plugin-idx 插件. { plugins: [

    8K10

    Web前端事件

    事件事件事件是与浏览器或文档交互瞬间,如点击按钮,填写表格等,它是JS与HTML之间交互桥梁。DOM是树形结构,若同时给父子结点绑定了相同事件,那么他们执行顺序是什么样子呢?...事件模型 DOM0级事件 这样事件模型中,事件是没有事件概念事件绑定比较简单: 直接在HTML中绑定事件处理函数 通过在js获取元素来绑定事件...{ //获取事件对象 var evt=window.event||e; return evt; }, getTarget:function(e){ //获得目标对象...常见鼠标事件主要是以下几种: mousedown:鼠标的键钮被按下。...mousedown事件与mouseup事件可以说click事件在时间上细分,顺序是mousedown => mouseup => click。因此一个点击事件,通常会激发几个鼠标事件

    3.3K00

    jQuery 事件(三) 事件绑定和解绑、对象使用、自定义事件

    当有多个过滤参数时,只有与这些参数完全匹配事件处理函数才会被移除 绑定2个事件 $("elem").on("mousedown mouseup",fn) 删除一个事件 $("elem").off("...() 事件对象使用 jQuery事件对象作用 标准”click”点击事件 $(elem).on("click",function(event){ event //事件对象 }) 在不同浏览器之间事件对象获取...jQuery根据 W3C 标准规范了事件对象,所以在jQuery事件回调方法中获取事件对象是经过兼容后处理过一个标准跨浏览器对象 ...事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁 事件对象是跟当前触发元素息息相关,能从里面获取相关信息,找到 event.target...比如this和(this)使用、event.target和(event.target)使用; 自定义事件 trigger事件 类似于mousedown、click、keydown等等这类型事件都是浏览器提供

    4.1K30

    开发者需要掌握JS事件

    JavaScript事件 事件通常与函数配合使用,这样就可以通过发生事件来驱动函数执行。事件是基于对象存在,事件通常可以修饰多种对象。...1.为对象添加事件2种方式 ①:在HTML元素中添加对象事件 事件 <meta http-equiv="content-type" content="text...问题:HTML 元素添加<em>事件</em>, 与<em>JS</em>添加<em>事件</em>是否可以完全等价? 在实际开发中,如果传<em>参数</em>,<em>使用</em>HTML元素绑定<em>事件</em>,如果不传<em>参数</em>,<em>使用</em><em>JS</em>绑定<em>事件</em>。传<em>参数</em>也可以<em>使用</em>与<em>JS</em>绑定<em>事件</em>【<em>使用</em>匿名函数】。...,提供event属性,所以在IE中可以直接<em>使用</em> event<em>对象</em> 火狐没有全局event<em>对象</em>,必须在发生<em>事件</em>时,产生一个event<em>对象</em> ,传递默认方法 6.form<em>的</em>提交、重置<em>事件</em> submit/reset...> HTML DOM Event<em>对象</em> 提供preventDefault()用于阻止默认<em>事件</em><em>的</em>发生, 该方法IE 不支持 ,在IE中<em>使用</em> returnValue 提供stopPropagation

    2.5K80

    原生 JS DOM 常用操作大全

    得到是一个对象数组 ,如需操作元素则需要遍历伪数组 并且伪数组不能使用数组方法 以标签名来获取元素参数:标签名返回是一个对象数组 (伪数组) 生僻字 生僻字 生僻字 生僻字 生僻字 注意:getElementsByTagName...事件处理 注册事件 注册事件有三种方法 使用HTML标签属性注册(例如 Vue事件注册)使用传统DOM对象注册 (onclick) 具有唯一性 注意:使用这种方式注册 一个事件源只能注册一个...包括导致事件元素、事件类型以及其他与特定事件相关信息。事件触发时系统会产生一个事件对象,并且系统会以实参形式传给事件处理函数在事件处理程序中声明一个形参用来接收事件参数。 //1....evt } 事件对象属性和方法 e.target返回 触发 事件对象 标准e.srcElement 返回触发事件对象 非标准 ie6-8e.type返回事件类型 比如 click mouseover...e.target 指向事件触发元素 别忘了e.通常情况下e.target 和 this 指向是一致 注意:有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行

    10110

    02-老马jQuery教程-jQuery事件处理

    可以通过事件处理程序事件对象data属性获取此值。 fn 事件处理程序。...在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认行为。...事件对象 在DOM学习时候我们很痛一点就是早期ie版本浏览器和最新标准浏览器事件对象获取事件对象属性直接都有些兼容问题。 事件对象获取兼容。...IE678:window.event 标准浏览器直接从事件处理程序参数中获得事件对象e e = e || window.event; 在jQuery事件处理程序中,可以直接获取事件对象,所有浏览器都兼容...3.1 事件对象属性介绍 event.type 获取事件类型 event.target 获取到触发事件元素。jQuery对其封装后,避免了各个浏览器不同标准差异。

    2.7K80

    02-老马jQuery教程-jQuery事件处理

    可以通过事件处理程序事件对象data属性获取此值。 fn 事件处理程序。fn内部作用域中this指向当前DOM对象(注意不是jQuery包装对象) 返回值: jQuery包装对象!!!...在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认行为。...事件对象 在DOM学习时候我们很痛一点就是早期ie版本浏览器和最新标准浏览器事件对象获取事件对象属性直接都有些兼容问题。 事件对象获取兼容。...IE678:window.event 标准浏览器直接从事件处理程序参数中获得事件对象e e = e || window.event; 在jQuery事件处理程序中,可以直接获取事件对象,所有浏览器都兼容...3.1 事件对象属性介绍 event.type 获取事件类型 event.target 获取到触发事件元素。jQuery对其封装后,避免了各个浏览器不同标准差异。

    6.4K00

    基础 | 面向对象实战之封装拖拽对象

    2、如何获取当前浏览器支持transform兼容写法 transform是css3属性,当我们使用它时就不得不面对兼容性问题。...在pc上浏览器中,结合mousedown、mousemove、mouseup这三个事件可以帮助我们实现拖拽。...当我们将元素绑定这些事件时,有一个事件对象将会作为参数传递给回调函数,通过事件对象,我们可以获取到当前鼠标的精确位置,鼠标位置信息是实现拖拽关键。...6、拖拽原理 当事件触发时,我们可以通过事件对象获取到鼠标的精切位置。这是实现拖拽关键。...在实际开发中,一个对象我们常常会单独放在一个js文件中,这个js文件将单独作为一个模块,利用各种模块方式组织起来使用。当然这里没有复杂模块交互,因为这个例子,我们只需要一个模块即可。

    53710

    web前端学习工作笔记(六)

    {{_item.name}} 解决:去掉on drop不生效解决:需要在dragover事件中阻止默认事件 dragOver(e){ e.preventDefault() } 98....:key要放在真正html元素上,不能放在 99. vue不能自动更新数组对象 解决: import Vue from 'vue' Vue.set(arr,index, newItem) //or...$on('val', (data) => { console.log(data) }) 101.子组件修改父组件属性: ①在watch里修改,比如show,否则报错 ②事件通知父组件,事件回调控制变量...emit(‘事件名’)必须和调用处事件名称对应 大小写或者带横杠 emit传递多个参数,正常传递 通知 this....\nodejieba\'node' 解决:安装好nodejieba,拷贝一份到node_modules 110.webstrom使用git拉gitlab代码报错: Repository test failed

    57830

    JQ事件事件对象

    1 事件 一 .鼠标事件    1.ready()页面载入事件:载入文档节点    2 click()熟悉单击事件    3 dbclick()双击事件    4 mousedown() /mouseup...有两个参数(方法),鼠标一定到指定对象以及移出时会触发 二 键盘事件    1 keydown 键盘按下时触发事件    2 keyup     键盘松开一瞬间触发事件    3 keypress...scrollTop()和scrollLeft() })  2 事件对象   JQ在事件函数中默认传递了参数event对象,    一  event对象属性        ... 获取显示器屏幕位置坐标 //整个屏幕高度    不会随着滚动条变化而变化          //clientX/clientY  获取相当于页面视口坐标 //除去上下窗口      不会随着滚动条变化而变化...在mousedown、mouseup事件中,event.which属性返回是对应鼠标按钮映射代码值(相当于event.button)。

    4.1K20

    InstantClick,让你网站快到起飞,PJAX技术

    (instantclick.js ≈ pjax + 预加载页面)而且,使用方法也十分简单。在github截止目前,已经由4447个star了,非常可观。...instantclick不总是“即插即用”(不是通过两行代码就可以在你网页上运行),你可能需要自定义一些设置来适应你网站,这也是为什么阅读上述文章是强制性。...使用方法:将'mousedown'作为参数传递给InstantClick.init InstantClick.init('mousedown'); 折中方式:鼠标悬停延迟一定时间才会预加载 如果用户在您选择延迟过后仍悬停在链接上...你可以使用receive事件。 这个事件有三个参数:url, ,body 和title。 url 接收页面的地址,它包括哈希值。它是只读。 body是body对象,title是标题文本。...如果你想在页面显示之前改变页面内容,你可以修改这两个参数并返回一个对象(或者只修改其中一个参数)。

    3.7K20
    领券