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>

 

posted @ 2019-11-08 09:59  泥称  阅读(388)  评论(0)    收藏  举报