event duplication bind bug & h5 dataset flag solution

https://codepen.io/xgqfrms/full/PaRBEy/

  1. OK

  1. 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的更多相关文章

  1. js & 快捷键 & vue bind bug

    js & 快捷键 & vue bind bug how to prevent addEventListener bind many times solution dataset &am ...

  2. vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug

    vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...

  3. 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 ...

  4. Jquery操作的是内存数据,H5 dataset操作的是dom属性

    Jquery操作的是内存数据,H5操作的是dom属性

  5. bind:tap="onLike" 中不能添加参数 及 dataset 传值

    <view bind:tap="onLike({{id}})"></view> //Component "pages/book-detail/bo ...

  6. ie烦人的bug篇

    好多公司都不支持ie6了,基本都是ie8+,就连jq新版本也宣布放弃低版本ie,就不用说那些框架了,不过想用兼容ie的angularjs可以用我司徒大神写的avalon,个人感觉avalon也是比较好 ...

  7. Tkinter教程之Event篇(3)

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1823550 '''Tkinter教程之Event篇(3)''''''11.两个事件同时绑定到一 ...

  8. jquery 关于event.target使用的几点说明介绍

    event.target说明:引发事件的DOM元素. this和event.target的区别js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的 ...

  9. 浅试 Webview 一app 加载 H5小游戏

    整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...

随机推荐

  1. Bitter.Core系列十一:Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore 之 字段变更收集器

    有时候我们业务层需要记录 数据库表更改之前的值和更改之后的值的记录集合--此过程在 Bitter.Core 中有强有力的支持.Bitter.Core 字段收集器提供了方便简单易用的 收集对象在修改之前 ...

  2. spark join 广告用户特征 与广告特征的 join 拿到训练集

    spark join 广告特征做广播

  3. 小步前进之WCF简介

    WCF 前言 什么是WCF? 契约 合约 前言 在 .NET Framework2.0 以及前版本中,微软发展了 Web Service..NET Remoting 等通信支持. 如果要进行通信,对于 ...

  4. Java执行Dos-Shell脚本

    Java执行Dos-Shell脚本 1.介绍 2.调用shell脚本 2.1 获取键盘输入 2.2 构建指令 2.3 Java代码 3.Java调用Shell并传入参数 4.Java调用远程的Shel ...

  5. Java——I/O相关练习代码

    File文件的相关练习 文件操作的三种方式 文件的相关方法练习 文件创建删除操作 文件练习 FileReader读取文件 读取文件逐行读取 InputStreamReader字符输出流 换行输出 Bu ...

  6. 深信服edr控制中心漏洞——代码执行

    第一处代码执行 文件:tool/php_cli.php第64行

  7. 报表生成工具ireport

    最近又开始学习新的玩意儿了,扒拉扒拉网上的资源,先捣鼓个思维导图.

  8. P2801 教主的魔法 (分块)

    题目传送 长度为\(n(n\le 1000000)\)的数组,\(q(q\le 3000)\) 次操作.修改操作即将某个区间的值增加某个不大于1000的值,查询操作即查询某个区间比C大于等于的数有多少 ...

  9. Codeforces Round #656 (Div. 3) B. Restore the Permutation by Merger

    题目链接:https://codeforces.com/contest/1385/problem/B 题意 有两个大小为 $n$ 的相同的排列,每次从二者或二者之一的首部取元素排入新的数组,给出这个大 ...

  10. 博弈论入门——Nim游戏引入

    说实话,我真的对这个游戏看得是一脸懵逼,因为(我太弱了)我没有明白一些变量的意思,所以一直很懵,现在才明白,这让我明白博弈论(还可以骗钱)博大精深; 以下是我自己思考的过程,也许不严谨,但是最终明白了 ...