event.srcElement.id为空

本文探讨了在HTML中通过事件监听器获取元素ID时遇到的问题及解决方案,涉及JavaScript的基本用法和DOM操作。对于前端开发者来说,了解如何正确地使用事件监听器并获取相关元素ID是构建交互式网页的基础技能。
document.oncontextmenu = function (event)
{
var event = event || window.event;     

var clickID = event.srcElement.id+"";

}

clickID 为空,

原因:html代码:    <div id="XE1">
<img src="images/port_disable.png" width="40" height="35">
</div>

获取到的为image,加上parentElement即为XE1

解决方法:var event = event || window.event;     
var obj = event.srcElement || event.target;
var clickID = obj.parentElement.id+"";


### `registeOpen` 函数的功能 `registeOpen` 函数的主要功能是注册一个点击事件监听器,用于处理用户点击具有特定 `id` 为 `assist-open` 的元素时的操作。根据不同的条件,该函数会决定是显示无障碍功能界面,还是重定向到指定的页面。 ### `registeOpen` 函数的实现逻辑 以下是 `registeOpen` 函数的代码及详细解释: ```javascript registeOpen: function registeOpen() { var _this = this; addEvent(document, 'click', function (event) { var event = window.event || event; var target = event.target || event.srcElement; if (target.getAttribute('id') == 'assist-open') { if (!_this.existIgnore()) { _this.show(); _this.message.publish('openState', true); } else { var namespace = _this.config.namespace; cookie.set('show', true, namespace); var __href = document.getElementById('assist-open').getAttribute('assist-href'); window.location.href = __href; } } }); } ``` 具体逻辑如下: 1. **绑定点击事件**:使用 `addEvent` 函数为 `document` 对象绑定一个 `click` 事件监听器。当用户点击页面上的任意元素时,该事件处理函数会被触发。 2. **获取事件目标**:在事件处理函数中,通过 `window.event || event` 获取事件对象,再通过 `event.target || event.srcElement` 获取触发事件的目标元素。 3. **检查目标元素的 `id`**:判断目标元素的 `id` 是否为 `assist-open`。如果是,则继续执行后续操作。 4. **检查是否存在忽略规则**:调用 `_this.existIgnore()` 方法检查当前页面是否在忽略列表中。 - **不在忽略列表中**:如果当前页面不在忽略列表中,则调用 `_this.show()` 方法显示无障碍功能界面,并通过 `_this.message.publish('openState', true)` 发布一个消息,通知其他模块无障碍功能已打开。 - **在忽略列表中**:如果当前页面在忽略列表中,则将 `show` 状态设置为 `true` 并存储在 cookie 中,然后获取 `assist-open` 元素的 `assist-href` 属性值,将页面重定向到该链接。 ### 代码示例解释 ```javascript addEvent(document, 'click', function (event) { // 获取事件对象和目标元素 var event = window.event || event; var target = event.target || event.srcElement; // 检查目标元素的 id 是否为 assist-open if (target.getAttribute('id') == 'assist-open') { // 检查当前页面是否在忽略列表中 if (!_this.existIgnore()) { // 不在忽略列表中,显示无障碍功能界面并发布消息 _this.show(); _this.message.publish('openState', true); } else { // 在忽略列表中,设置 cookie 并重定向页面 var namespace = _this.config.namespace; cookie.set('show', true, namespace); var __href = document.getElementById('assist-open').getAttribute('assist-href'); window.location.href = __href; } } }); ``` ### 总结 `registeOpen` 函数通过监听 `document` 的 `click` 事件,处理用户点击 `assist-open` 元素的操作,根据页面是否在忽略列表中,决定是显示无障碍功能界面还是重定向到指定页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值