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>
  • 相关阅读:
    mysql将一个表的数据 重复复制多份到表中
    PHP中将指定文本内容导入到word中
    系统安全-SElinux
    通过身份证号码提取年龄,性别
    MySQL-获取某天的数据
    mysql-介绍、MySQL部署、数据类型、存储引擎
    监控系统-ELK
    监控系统-Grafana
    监控系统-zabbix
    监控系统-openfalcon
  • 原文地址:https://www.cnblogs.com/ChenRihe/p/11818358.html
Copyright © 2011-2022 走看看