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>
  • 相关阅读:
    MySQL5.7 多实例
    千万不要去考验人性
    Mysql事件监控日志
    chmod a+r file:给所有用户添加读的权限
    percona-toolkit 之 【pt-summary】、【pt-mysql-summary】、【pt-config-diff】、【pt-variable-advisor】说明
    腾讯游戏DBA团队的发展自白
    致DBA:为什么你经常犯错,是因为你做的功课不够
    这套方法论,彻底终结MySQL同步延迟问题
    gh-ost:不一样的在线表结构变更
    初试GH-OST(转)
  • 原文地址:https://www.cnblogs.com/ChenRihe/p/11818358.html
Copyright © 2011-2022 走看看