javascript - jQuery dblclick() 事件和 Html ondblclick() 事件之间的区别

Question

这个问题已经有答案了:

jquery .live('click') vs .click() (11 个回答)

已关闭 3 年前。

我正在做一个项目，我需要视频在双击后变成全屏。我尝试了两种方法。第一个工作正常，但第二个不行。我不明白为什么会这样？

<小时/>

第一种方法(使用 dblclick jquery 可以正常工作的方法):js

var elem = document.getElementsByClassName("video")[0];
function makefullscreen(){
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    });

html

      <video class="video" autoplay ondblclick="makefullscreen()">
          <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
      </video>

<小时/>

第二种方式(使用 html ondblclick 不起作用的方式):

js

$(".video").dblclick(function(){
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    });

html

        <video class="video" autoplay>
          <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
        </video>

Answer 1

在 .ready 中尝试，因为应该首先加载 DOM 元素。同时使用 .on() 检查它是否有效

$(document).ready(function(){
$(".video").on("dblclick",function(){

    if (this.requestFullscreen) {
        this.requestFullscreen();
      } else if (this.mozRequestFullScreen) { /* Firefox */
        this.mozRequestFullScreen();
      } else if (this.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        this.webkitRequestFullscreen();
      } else if (this.msRequestFullscreen) { /* IE/Edge */
        this.msRequestFullscreen();
      }
    });

});

});