event.target在IE和其它浏览器中的问题

最新推荐文章于 2024-12-03 10:35:42 发布
原创 最新推荐文章于 2024-12-03 10:35:42 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在Internet Explorer浏览器中使用event.target与event.srcElement的兼容性问题，指出在IE环境下，当尝试使用event.target时可能会遇到undefined的情况。文章通过实例分析了如何在不同浏览器中正确使用这两个属性，并提供了替代方案event.srcElement。

以前一直没注意event.target的浏览器兼容性问题，这两天突然碰到一个问题，跟踪发现是由于event.target在IE下为undefined导致的。

找了一些资料发现在IE下相同功能用event.srcElement，记录一下

JavaScript技巧：使用event.target和event.srcElement来获取事件目标
TechNovaX的博客
09-23 700
在处理这些事件时，有时我们需要获取事件的目标元素，也就是触发该事件的元素。需要注意的是，event.srcElement只在一些较旧的IE浏览器版本中支持，而在现代的浏览器中，我们应该优先使用event.target来获取事件目标，以保证代码的兼容性。在上面的代码中，我们使用addEventListener方法来监听一个点击事件，并在控制台输出事件的目标元素。在上面的代码中，我们通过直接给document对象的onclick属性赋值的方式来监听点击事件，并输出事件的目标元素。
ie8兼容性问题(五) event对象、e.target和e.preventDefault
热门推荐
云_飞扬
09-19 1万+
event对象 在chrome、firefox等浏览器中，event对象可从事件函数的参数中传入。ie8中须从window对象中获取 $("#btn").click(function(e) { var event = e | window.event; }) target $("#btn").click(function(e) { var event =
解决IE8下JS无法获得file控件全路径的办法
08-30 449
IE8浏览器安全性能增加，使用js获取file控件的值的时候，只有文件名是正确的，而路径部分会被“C：”
vue.js – event对象兼容性问题
qq_39241421的博客
11-05 2224
应用场景：头部【搜索功能】 点击全局页面任意位置搜索框下的下拉框隐藏，此时点击搜索框输入信息时需要阻止冒泡，event.stopPropagation()；此时没有注意这点event，在浏览器中会有问题。 追根溯源 ：event对象  Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会再事件发生前执行。 wi...
ie9及以下不兼容event.target.dataset对象
weixin_30555753的博客
11-21 185
ie9及以下不兼容event.target.dataset对象，请使用event.target.getAttribute('data-xxx') 转载于:https://www.cnblogs.com/toward-the-sun/p/6085523.html
需要用到e.target查看事件源兼容IE的写法
baidu_38027860的博客
04-25 2740
$("div").click(function(e){    var event = e || window.event;    var target = event.target || event.srcElement;})
js中的触发事件对象event.srcElement与event.target详解
10-20
例如，在IE浏览器中，事件对象包含srcElement属性，而在Firefox及其他遵循DOM标准的浏览器中，则使用target属性。尽管两者在不同浏览器中的实现有所不同，但其功能是相似的，即指向触发事件的元素。通过event....
IE event.srcElement和FF event.target 功能比较
12-04
在JavaScript事件处理中，`event.srcElement` 是 Internet Explorer 浏览器特有的属性，用于获取事件发生时的源元素，而 `event.target` 是在 Firefox、Chrome、Safari 和其他遵循 W3C 规范的浏览器中使用，作用相同...
利用jQuery的$.event.fix函数统一浏览器event事件处理
10-29
例如，在Internet Explorer（IE）浏览器中获取触发事件的元素引用使用的是event.srcElement属性，而在基于Gecko引擎的FireFox（FF）浏览器中使用的是event.target属性。类似这样的差异性，还包括获取鼠标光标相对...
浏览器中event.srcElement和event.target的兼容性问题
weixin_33929309的博客
11-25 1124
在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性.。 解决方法：使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.tar...
火狐和IE的window.event的区别
小九的博客
02-16 1872
一、event对象   IE 中可以直接使用 window.event 对象，而 FF 中则不可以，解决方法之一如下： var theEvent = window.event || arguments.callee.caller.arguments[0]; 第二种是将 event 作为参数来传递: function test(event) { var eve
不同浏览器根据超链接的target属性查找iframe
学习记录和开发记录
08-03 2116
1，情景： 点击超链接，在iframe中显示加载的新页面，超链接的target写iframe的id或者name属性。 2，浏览器 IE11， GoogleChrome31， FireFox47 3，部分页面代码： 首页 账目 记事本 留言板 Not support iframe? 结论： 1，当iframe没有n
IE中文件选取方法执行两次，e.target.files[0]报错
山海一哥的博客
08-01 2052
<input type='file' @change="upload;"> 该upload方法在其他浏览器中可以通过e.target.files[0]正常上传，但是在IE中却报错，通过控制台查看发现该方法执行了两次，第二次的e.target.name错误，这为里不讨论为何会执行两次的问题，既然报错，就在于代码在一步步往下走的时候，走不下去了，那么我们只需要在他下一步报错之前退...
小程序踩坑之获取不到e.target.dataset的值
weixin_34062329的博客
11-24 4334
在页面与js传值中我们经常用到data-id="1"的方式，然后通过e.target.dataset.id取id的值今天在获取值时怎么也取不到，后来发现e对象有currentTarget和target属性，而dataset就在currentTarget中，所以通过e.currentTarget.dataset.id取到了正确的值。另外dat...
React 使用event.target报错
insist_Y的博客
12-03 370
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.per
为什么浏览器打印后会有一个undefined
Cchen的博客
04-24 866
原因：浏览器中调试代码，浏览器会默认输出打印语句+返回值，多行调试命令返回时只执行最后一个返回值。
Uncaught ReferenceError ReferenceError: EventTarget is not defined的完美解决方案
zhuvee的博客
11-11 679
web3的当前版本需要EventTarget类，而使用的node.js版本太低，高版本才支持EventTarget。
Event 对象--target 事件属性
Tarafireworks的博客
08-31 3319
定义和用法 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 window.event.srcElement与window.event.target 都是指向触发事件的元素，它是什么就有什么样的属性 srcElement是事件初始化目标html元素对象引用，因为事件通过元素层次冒泡，可以在任意一层进行处理， 有了元素的引用，就可以读写改元素的属性。 IE浏览器支持window.event.srcElement ， 而firefox支持window.event.t
vue 中使用 event.target.value 踩坑
siriurr的博客
04-22 4820
event.target 和 event.currentTarget 的区别
js DOM event.target.getBoundingClientRect()方法
最新发布
03-08
### JavaScript DOM Event Target `getBoundingClientRect` 方法详解 #### 定义与描述 `Element.getBoundingClientRect()` 方法返回一个对象，该对象提供了元素的大小及其相对于视口的位置。此方法对于动态计算元素位置非常有用。 #### 返回值说明 返回的对象是一个 `DOMRect` 对象，其无缩放情况下具有如下只读属性： - `x`: 距离视窗左侧的距离 (等同于 `left`) - `y`: 距离视窗顶部的距离 (等同于 `top`) - `width`: 元素宽度 - `height`: 元素高度 - `top`: 边框上边沿距离视窗顶端的距离 - `right`: 边框右边沿距离视窗左端的距离 - `bottom`: 边框下边沿距离视窗顶端的距离 - `left`: 边框左边沿距离视窗左端的距离 这些数值考虑了页面滚动条的影响[^1]。 #### 使用场景举例 当需要精确知道某个 HTML 元素在屏幕上的确切位置时可以调用这个 API 。比如实现拖拽功能、定位弹出菜单或者创建复杂的动画效果都需要获取元素的确切尺寸和坐标信息。 #### 实际应用案例 下面展示如何利用 `event.target.getBoundingClientRect()` 来响应点击事件并打印被点击元素的相关几何信息: ```javascript document.addEventListener('click', function(event){ const rect = event.target.getBoundingClientRect(); console.log(`Clicked element's position:`); console.log(`Top: ${rect.top}px, Left: ${rect.left}px`); console.log(`Width: ${rect.width}px, Height: ${rect.height}px`); }); ``` 上述代码片段会在每次发生点击操作的时候输出所选中的 DOM 节点的具体边界矩形数据至浏览器控制台中[^2]。 #### 结合 VML 创建图形实例 考虑到某些旧版IE浏览器可能不支持现代CSS特性，在特定条件下还可以借助VML(Vector Markup Language)绘制矢量图元作为补充方案之一。例如，可以通过组合使用 `createVmlNamespace` 和 `appendChild` 等API构建自定义形状，并通过 `getBoundingClientRect` 获取它们的实际布局参数以便进一步处理: ```javascript if (!window.VMLSupported && !document.namespaces.v){ document.namespaces.add("v","urn:schemas-microsoft-com:vml"); } var vmlContainer = document.getElementById('container'); var hRect = document.createElement('<rect xmlns="urn:schemas-microsoft-com:vml">'); hRect.style.position = 'absolute'; // 设置其他样式... vmlContainer.appendChild(hRect); function logPosition(){ let posInfo=hRect.getBoundingClientRect(); alert(JSON.stringify(posInfo)); } setTimeout(logPosition,1000); // 延迟一秒执行以确保渲染完成 ``` 以上示例展示了即使是在较为特殊的环境下也能灵活运用 `getBoundingClientRect` 进行开发工作。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值