js other event target

最新推荐文章于 2024-01-31 16:52:45 发布
原创 最新推荐文章于 2024-01-31 16:52:45 发布 · 151 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解耦导航模式的实现方法，通过定义通用的事件处理函数来响应用户交互，并展示了如何在不同的HTML元素上使用该函数。这种方法有助于提高代码的可维护性和可读性。

 

解耦导航模式

function Onclick(evt)

{

        evt=(evt)?evt:((event)?event:null);

         if(evt)

           {

                 var elem=(evt.target)?evt.target:((evt.srcElement)?evt.srcElement:null);

                 if(elem)

                   {

                          //document.getElementById()

 

                    }

 

            }

 

}

 

<div onclick="Onclick(event)"></div>

 

ID.attachEvent('onclick',Onclick);

(ID)['onclick']=Onclick

 

 

<div onclick="return OnCk(event)"></div>

 

function OnCk(evt)

 

{

          ......

           if(true)

                   return true;

            if(false)

                   return false;

 

}

NLog自定义Target之MQTT
weixin_45566993的博客
06-21 413
重写Write方法 使用 下面将使用Nlog.Target.MQTT,演示通过web实时查看应用程序的日志。 配置MQTTServer和NLog Web连接MqttServer 输出日志 实时查看日志 访问index.html 通过Mqtt客户端订阅日志 源码 在这里NLog.Targets.MQTT:https://github.com/iioter/NLog.Targets.MQTT[1] NLog.Targets.MQTT:https://github.com/iioter
JavaScript other
Anwar的博客
03-29 2094
other1.localStorage2.eval()3. 原生js 1.localStorage 只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；其存储的数据能在跨浏览器会话保留。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。 2.eval() 这个函数可以用来
JS 小技巧
Done
08-31 728
1，在一个数组的最后添加一个元素 这个技巧可以让你使用Length属性在一个数组的最后添加一个元素，因为Length属性比数组的最后一个元素的下标多1。这个方法和“push”方法是相同的。例如：   var myArray = [];   myArray[myArray.length] = 'New Element';     2，调整一个数组的长度 Length属性不是只读的...
js正则匹配分割（other）
zoepriselife316的博客
09-24 2593
别人遇到的问题，如果后台返回 let a = "03:38 - 05:50 21:48 - 22:48"; 如何正则分割成如下： 03:38 - 05:50 和21:48 - 22:48 若直接a.split() a.split(/\d\s+\d/) 得到的结果： ["03:38 - 05:5", "1:48 - 22:48"] 会发现少了几个数字 所以用a.split(/(?<=...
js中every用法_干货 | other, others与another用法区别辨析
weixin_39644915的博客
11-30 947
总是有人分不清other，others，another的区别，今天咱们就来详细说明一下。1、other的用法(1) other 通常用于修饰复数名词，有时也修饰不可数名词。如：Moral beauty ought to be ranked above all other beauty. 品德美应列于其他美之上。(2) 若要修饰单数可数名词，则其前通常应有the, this, that, some,...
CocosCreator 源码event-target.js详解
weixin_50892911的博客
01-31 407
【代码】CocosCreator 源码event-target.js详解。
Event order
caoguanling2011的专栏
07-01 899
On the Introduction to events page I asked a question that at first sight seems incomprehensible: “If an element and one of its ancestors have an event handler for the same event, which one should f
JS - event
howlowl
05-18 171
Once you register and capture an event, you'llreceive an event object back from the browser.The object you get might look different dependingon the version of the browser you're using.And ...
event.js
weixin_30252155的博客
11-30 180
<script> (function(){ var cache = {}, guidCounter = 1, expando = "data" + (new Date).getTime(); this.getData = function(elem){ var guid = elem[expando]; ...
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
10-14
5. 使用`event.target`获取触发事件的DOM元素，进一步获取其属性，如内容。 了解这些基础知识后，你可以轻松地在Vue应用中实现点击列表项时获取相关数据和事件信息的功能。记住，Vue的事件处理和数据绑定机制使得...
IE和FireFox(FF)中js和css的不同
12-09
在网页开发过程中，由于Internet Explorer（IE）和Firefox（FF）浏览器内核的不同，JavaScript（JS）和CSS的实现存在一些差异。以下是一些关键点的详细解释： **CSS差异：** 1. **`<ul>` 标签的外边距和内边距**：...
function handleFileStart(event) { for (let file of event.target.files) { if (!file.name) { continue; } } }匹配 % +等字符
最新发布
07-26
for (let file of event.target.files) { if (!file.name) { continue; } // ... } } ``` 用户说“匹配 % +等字符”，意思是“match % + and other characters”。所以，可能用户想添加逻辑来检查文件名中是否...
text/x-generic addaccount.js ( ASCII text, with CRLF line terminators ) // Keep your original radio toggle function function toggleRadio(event, element) { //console.log('Radio toggle clicked', element); event.stopPropagation(); // Prevents <summary> toggle const details = element.closest('details'); //console.log('Found parent details for radio:', details); details.classList.toggle('digages-onboard-addacnt-checked'); // Toggle only the clicked item //console.log('Toggled checked class on details'); } // Optional: Explicit chevron toggle document.querySelectorAll('.digages-onboard-addacnt-chevron').forEach(chevron => { chevron.addEventListener('click', (event) => { //console.log('Chevron clicked', chevron); const details = chevron.closest('details'); //console.log('Toggling details open state from', details.open, 'to', !details.open); details.open = !details.open; event.stopPropagation(); // Added to prevent event bubbling }); }); // Function to ensure only one details is open and has the checked class document.addEventListener('DOMContentLoaded', function() { //console.log('DOM fully loaded'); const allDetails = document.querySelectorAll('details'); //console.log('Found', allDetails.length, 'details elements:', allDetails); // Add event listeners for handling accordion behavior allDetails.forEach((details, index) => { //console.log('Setting up listeners for details #', index); // Track the toggle event which fires when open state changes details.addEventListener('toggle', function(event) { //console.log('Toggle event fired on details #', index); //console.log('Current open state:', details.open); if (details.open) { //console.log('This details was opened, closing others'); // Close all other details and remove checked class allDetails.forEach((otherDetails, otherIndex) => { if (otherDetails !== details) { if (otherDetails.open) { //console.log('Closing details #', otherIndex); otherDetails.open = false; } // Remove checked class from all other details if (otherDetails.classList.contains('digages-onboard-addacnt-checked')) { //console.log('Removing checked class from details #', otherIndex); otherDetails.classList.remove('digages-onboard-addacnt-checked'); } } }); // Add checked class to the current details if it doesn't have it if (!details.classList.contains('digages-onboard-addacnt-checked')) { //console.log('Adding checked class to details #', index); details.classList.add('digages-onboard-addacnt-checked'); } } }); }); }); // Add click listener to document to ensure proper class management on summary clicks document.addEventListener('click', function(event) { const clickedSummary = event.target.closest('summary'); if (clickedSummary) { //console.log('Summary element clicked'); const clickedDetails = clickedSummary.closest('details'); // Wait a tiny bit for the default toggle behavior to complete setTimeout(function() { const allDetails = document.querySelectorAll('details'); allDetails.forEach((details) => { // If details is open but not the clicked one, close it and remove class if (details !== clickedDetails && details.open) { details.open = false; details.classList.remove('digages-onboard-addacnt-checked'); } // If it's the clicked details and it's open, ensure it has the class if (details === clickedDetails && details.open) { details.classList.add('digages-onboard-addacnt-checked'); } }); }, 10); } });
07-09
你提供的 `addaccount.js` 是一个用于实现可折叠（accordion）行为的 JavaScript 文件，它主要处理 `<details>` 和 `<summary>` 元素的行为，以支持“单选展开”效果。同时它也管理 `.digages-onboard-addacnt-...
Jquery fullcalendar 官方中文文档
wfdoublext的专栏
08-22 777
1. 使用方式, 引入相关js, css后, $(‘#div_name’).fullCalendar({//options});  接受的是一个option对象2. 普通属性2.1. year, month, date: 整数, 初始化加载时的日期.2.2. defaultView: 字符串类型, 默认是’month;2.2.1. 允许的views:2.2.1.1. month   一页显示一月,...
dragmove
wfdoublext的专栏
06-16 733
http://www.blueidea.com/tech/web/2006/3791_5.asp       document.onmousemove = mouseMove;document.onmouseup   = mouseUp; var dragObject  = null;var mouseOffset = null; function getMouseOffset(target, e...
光标位置函数
wfdoublext的专栏
12-16 432
function getCursortPosition (ctrl) {//获取光标位置函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart (...
div 最上层锁定页面
wfdoublext的专栏
07-30 324
http://www.ajaxbbs.net/ymPrompt2.0/#entrymore     &lt;SCRIPT language="javascript"&gt;&lt;!--function lock(menu)       //锁定函数{menu.style.display="none"?'':''; //打开蒙版document.cookie="lock=yes";   //设置c...
js 验证函数
wfdoublext的专栏
09-11 233
Javascript函数大全 /* -------------- 函数检索 -------------- trim函数: trim() lTrim() rTrim() 校验字符串是否为空: checkIsNotEmpty(str) 校验字符串是否为整型: checkIsInteg...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值