zoukankan      html  css  js  c++  java
  • JS判断全屏,Jquery绑定动态元素Parent元素单击事件

    <!DOCTYPE HTML>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    <body>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script>
            //兼容IE
            function isFullscreen() {
                return document.fullscreenElement ||
                    document.msFullscreenElement ||
                    document.mozFullScreenElement ||
                    document.webkitFullscreenElement || false;
            }
            setInterval(function () { if (isFullscreen()) { console.log('Fullscreen') } else { console.log('Not Fullscreen') } }, 2000);
    
            //绑定动态元素Parent元素单击事件
            setInterval(function () {
                if ($('.on-parent')) {
                    $('.on-parent').parent().off('click').click(function () {
                        alert('循环器绑定动态元素Parent元素单击事件');
                    })
                }
            }, 100)
            //各浏览器全屏改变事件,IE部分不兼容
            document.addEventListener("fullscreenchange", function () {
                console.log((document.fullscreen) ? "全屏" : "非全屏");
            }, false);
    
            document.addEventListener("mozfullscreenchange", function () {
                console.log((document.fullscreen) ? "全屏" : "非全屏");
            }, false);
    
            document.addEventListener("webkitfullscreenchange", function () {
                console.log((document.fullscreen) ? "全屏" : "非全屏");
            }, false);
    
            document.addEventListener("msfullscreenchange", function () {
                console.log((document.fullscreen) ? "全屏" : "非全屏");
            }, false);
    
            function appentonParent() {
                $('#btnAppentonParent').after('<div><p>OnParent</p><p class="on-parent">On</p></div>');
            }
            //绑定动态元素Parent元素单击事件 无效
            $(document).on('click', '.on-parent:parents', function () {
                alert('绑定动态元素Parent元素单击事件');
            })
        </script>
        <video src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4" controls="controls">
            浏览器不支持Video
        </video>
        <br />
        <button id="btnAppentonParent" onclick="appentonParent()">
            追加动态元素
        </button>
    </body>
    
    </html>
  • 相关阅读:
    24种设计模式之适配器模式
    内存分配与回收策略
    java 吞吐量
    JVM运行数据区
    垃圾收集算法学习
    对象的回收
    未来一段时间学习方向
    多线程并发容器
    python基础数据类型--list列表
    Sublime Text 快捷键
  • 原文地址:https://www.cnblogs.com/ChenRihe/p/11818358.html
Copyright © 2011-2022 走看看