event duplication bind bug & h5 dataset flag solution
event duplication bind bug & h5 dataset flag solution
https://codepen.io/xgqfrms/full/PaRBEy/
- OK
- bug
demo
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright gildata
*
* @description zoom modules
* @augments
* @example
*
*/
const ZoomModule = () => {
const zoomIO = () => {
// this === e.target;
console.log(`this =`, this);
// undefined ???
// console.log(`this.innerText =`, this.innerText, typeof(this.innerText));
let text = this.innerText;
if (text === "放大") {
this.innerHTML = "缩小";
} else {
this.innerHTML = "放大";
}
// this === e.target;
// console.log(`this =`, this);
// console.log(`this.parentNode =`, this.parentNode);
// console.log(`this.parentNode.parentNode =`, this.parentNode.parentNode);
// console.log(`this.parentNode.parentNode.nextElementSibling =`, this.parentNode.parentNode.nextElementSibling);
// console.log(`this.parentNode.parentNode.parentNode =`, this.parentNode.parentNode.parentNode);
this.parentNode.style.width = "1024px !important";
this.parentNode.style.maxWidth = "1024px !important";
this.parentNode.parentNode.style.width = "1024px !important";
this.parentNode.parentNode.style.maxWidth = "1024px !important";
this.parentNode.parentNode.nextElementSibling.style.width = "1024px !important";
this.parentNode.parentNode.nextElementSibling.style.maxWidth = "1024px !important";
this.parentNode.parentNode.parentNode.classList.toggle(`h5-full-screen`);
};
function zoomIcons() {
console.log(`this =`, this);
if (this.innerText === "放大") {
this.innerHTML = "缩小";
} else {
this.innerHTML = "放大";
}
this.parentNode.style.width = "1024px !important";
this.parentNode.style.maxWidth = "1024px !important";
this.parentNode.parentNode.style.width = "1024px !important";
this.parentNode.parentNode.style.maxWidth = "1024px !important";
this.parentNode.parentNode.nextElementSibling.style.width = "1024px !important";
this.parentNode.parentNode.nextElementSibling.style.maxWidth = "1024px !important";
this.parentNode.parentNode.parentNode.classList.toggle(`h5-full-screen`);
}
let zooms = [...document.querySelectorAll(`[data-zoom="otc-zoom"]`)];
zooms.forEach(
(zoom, i) => {
if (zoom) {
// if (existEvent) ? false : true;
console.log(`zoom.dataset.eventFlag =`, zoom.dataset, zoom.dataset.eventFlag);
let flag = zoom.dataset.eventFlag;
// data-event-flag="false"
if (!flag) {
zoom.addEventListener(`click`, function (e) {
zoomIcons.bind(zoom)();
});
} else {
// do nothing
zoom.dataset.eventFlag = "false";
}
// zoom.addEventListener(`click`, zoomIO);
// zoom.addEventListener(`click`, zoomIO.bind(zoom));
// ES6 ??? this bug
zoom.addEventListener(`click`, function (e) {
// bug ???
// zoomIO === undefined ???
// zoomIO.bind(zoom)();
// zoomIO.bind(this)();
// zoomIO.bind(e.target)();
// zoomIO.call(zoom);
// zoomIO.call(this);
// zoomIO.apply(zoom);
// zoomIO.apply(this);
});
// old
zoom.addEventListener(`click`, function (e) {
// 1. bind return a new function
// 2. call & apply IIFE
// 3. pass args way different
// func.bind(target)();
// bind OK
// zoomIcons.bind(this)();
// zoomIcons.bind(zoom)();
// zoomIcons.bind(e.target)();
// call OK
// zoomIcons.call(zoom);
// zoomIcons.call(this);
// apply OK
// zoomIcons.apply(zoom);
// zoomIcons.apply(this);
});
// zoom.addEventListener(`click`, function (e) {
// console.log(`this =`, this);
// if (this.innerText === "放大") {
// this.innerHTML = "缩小";
// } else {
// this.innerHTML = "放大";
// }
// this.parentNode.style.width = "1024px !important";
// this.parentNode.style.maxWidth = "1024px !important";
// this.parentNode.parentNode.style.width = "1024px !important";
// this.parentNode.parentNode.style.maxWidth = "1024px !important";
// this.parentNode.parentNode.nextElementSibling.style.width = "1024px !important";
// this.parentNode.parentNode.nextElementSibling.style.maxWidth = "1024px !important";
// this.parentNode.parentNode.parentNode.classList.toggle(`h5-full-screen`);
// });
}
}
);
};
const ZoomModules = () => {
function zoomIcons() {
console.log(`this =`, this);
if (this.innerText === "放大") {
this.innerHTML = "缩小";
} else {
this.innerHTML = "放大";
}
this.parentNode.style.width = "1024px !important";
this.parentNode.style.maxWidth = "1024px !important";
this.parentNode.parentNode.style.width = "1024px !important";
this.parentNode.parentNode.style.maxWidth = "1024px !important";
this.parentNode.parentNode.nextElementSibling.style.width = "1024px !important";
this.parentNode.parentNode.nextElementSibling.style.maxWidth = "1024px !important";
this.parentNode.parentNode.parentNode.classList.toggle(`h5-full-screen`);
}
let zooms = [...document.querySelectorAll(`[data-zoom="otc-zoom"]`)];
zooms.forEach(
(zoom, i) => {
if (zoom) {
// if (existEvent) ? false : true;
// console.log(`zoom.dataset =`, zoom.dataset);
console.log(`zoom.dataset.eventFlag =`, zoom.dataset.eventFlag);
let flag = zoom.dataset.eventFlag;
// data-event-flag="false"
if (!flag) {
// if (flag === undefined || flag === "false") {
zoom.addEventListener(`click`, function (e) {
zoomIcons.bind(zoom)();
});
if (flag === undefined) {
zoom.dataset.eventFlag = false;
// zoom.dataset.eventFlag = "false";
console.log(`zoom.dataset =`, zoom.dataset);
console.log(`zoom.dataset.eventFlag =`, zoom.dataset.eventFlag, typeof(zoom.dataset.eventFlag));
}
} else {
// do nothing
}
}
}
);
};
refs
https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
event duplication bind bug & h5 dataset flag solution的更多相关文章
- js & 快捷键 & vue bind bug
js & 快捷键 & vue bind bug how to prevent addEventListener bind many times solution dataset &am ...
- vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug
vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...
- Flash TextField selectable bug block TextEvent.Link solution
There is an old version Felx SDK bug(in my case it's Flex SDK v3.3.0.4852) that when TextField.selec ...
- Jquery操作的是内存数据,H5 dataset操作的是dom属性
Jquery操作的是内存数据,H5操作的是dom属性
- bind:tap="onLike" 中不能添加参数 及 dataset 传值
<view bind:tap="onLike({{id}})"></view> //Component "pages/book-detail/bo ...
- ie烦人的bug篇
好多公司都不支持ie6了,基本都是ie8+,就连jq新版本也宣布放弃低版本ie,就不用说那些框架了,不过想用兼容ie的angularjs可以用我司徒大神写的avalon,个人感觉avalon也是比较好 ...
- Tkinter教程之Event篇(3)
本文转载自:http://blog.csdn.net/jcodeer/article/details/1823550 '''Tkinter教程之Event篇(3)''''''11.两个事件同时绑定到一 ...
- jquery 关于event.target使用的几点说明介绍
event.target说明:引发事件的DOM元素. this和event.target的区别js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的 ...
- 浅试 Webview 一app 加载 H5小游戏
整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...
随机推荐
- Bitter.Core系列十一:Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore 之 字段变更收集器
有时候我们业务层需要记录 数据库表更改之前的值和更改之后的值的记录集合--此过程在 Bitter.Core 中有强有力的支持.Bitter.Core 字段收集器提供了方便简单易用的 收集对象在修改之前 ...
- spark join 广告用户特征 与广告特征的 join 拿到训练集
spark join 广告特征做广播
- 小步前进之WCF简介
WCF 前言 什么是WCF? 契约 合约 前言 在 .NET Framework2.0 以及前版本中,微软发展了 Web Service..NET Remoting 等通信支持. 如果要进行通信,对于 ...
- Java执行Dos-Shell脚本
Java执行Dos-Shell脚本 1.介绍 2.调用shell脚本 2.1 获取键盘输入 2.2 构建指令 2.3 Java代码 3.Java调用Shell并传入参数 4.Java调用远程的Shel ...
- Java——I/O相关练习代码
File文件的相关练习 文件操作的三种方式 文件的相关方法练习 文件创建删除操作 文件练习 FileReader读取文件 读取文件逐行读取 InputStreamReader字符输出流 换行输出 Bu ...
- 深信服edr控制中心漏洞——代码执行
第一处代码执行 文件:tool/php_cli.php第64行
- 报表生成工具ireport
最近又开始学习新的玩意儿了,扒拉扒拉网上的资源,先捣鼓个思维导图.
- P2801 教主的魔法 (分块)
题目传送 长度为\(n(n\le 1000000)\)的数组,\(q(q\le 3000)\) 次操作.修改操作即将某个区间的值增加某个不大于1000的值,查询操作即查询某个区间比C大于等于的数有多少 ...
- Codeforces Round #656 (Div. 3) B. Restore the Permutation by Merger
题目链接:https://codeforces.com/contest/1385/problem/B 题意 有两个大小为 $n$ 的相同的排列,每次从二者或二者之一的首部取元素排入新的数组,给出这个大 ...
- 博弈论入门——Nim游戏引入
说实话,我真的对这个游戏看得是一脸懵逼,因为(我太弱了)我没有明白一些变量的意思,所以一直很懵,现在才明白,这让我明白博弈论(还可以骗钱)博大精深; 以下是我自己思考的过程,也许不严谨,但是最终明白了 ...