event duplication bind bug & h5 dataset flag solution

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 发布文章使用：只允许注册用户才可以访问！

---