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>
  • 相关阅读:
    jQuery选择器总结
    HTML页面跳转的5种方法
    与孩子共情就是这么简单!
    C#中使用OracleTransaction
    如何查看Mysql服务器上的版本
    使用C#通过Oracle.DataAccess连接Oracle,部署时需要注意版本问题
    使用docker搭建hadoop环境,并配置伪分布式模式
    Hadoop安装教程【转】
    PHP+Hadoop+Hive+Thrift+Mysql实现数据统计分析
    《阿里巴巴 Java 开发手册》划重点!
  • 原文地址:https://www.cnblogs.com/ChenRihe/p/11818358.html
Copyright © 2011-2022 走看看