我有一个使用on('touchstart')jQuery方法附加事件侦听器的Java代码片段"代码片段1-它在用户touch 交互上播放通过AJAX加载的html视频".我需要能够切换事件侦听器打开和关闭或删除和重新绑定它们.我遇到的问题是on('touchstart')方法继续调用函数(播放页面上的所有视频)每个用户交互.

我需要事件侦听器调用的函数在最初的touch 交互,然后禁用,直到AJAX加载更多的内容"视频".在每次AJAX成功之后,我希望重新绑定/重新添加事件侦听器,以便该函数再次工作.

Code Snippet 1

function videoEvents2() {
    Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
        get: function() {
            return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
        }
    });

    $(document).on('click', 'body', playVideoOnLowPower);
    $(document).on('touchstart', 'body', playVideoOnLowPower);

    function playVideoOnLowPower() {
        try {
            const videoElements = document.querySelectorAll("video");
            for (i = 0; i < videoElements.length; i++) {
                if (videoElements[i].playing) {
                    // video is already playing so do nothing
                    console.log('Playing');
                } else {
                    // video is not playing so play video now
                    videoElements[i].play();
                    console.log('Not Playing');
                }
            }
        } catch (err) {
            console.log(err);
        }
    }
}

我已经try 了以下解决方案,但都没有成功.

try %1.将布尔属性{once: true}添加到EventListener,但没有提供所需的结果.布尔属性将只允许函数执行一次.

try 2.我对EventListener使用了one()而不是on()方法,但是它提供了与{once : true}相同的结果

try 3.我try 了document.body.addEventListener&amp;document.body.removeEventListener方法,并将EventListeners重新格式化为"请参阅本段下面的代码片段",但"emoveEventListener"方法会立即执行,而不是在调用函数时执行.

document.body.addEventListener("click", playVideoOnLowPower, {
    once: true
});
document.body.addEventListener("touchstart", playVideoOnLowPower, {
    once: true
});

function dsdvideoEvents3 {
    document.body.removeEventListener("click", playVideoOnLowPower, {
        once: true
    });
    document.body.removeEventListener("touchstart", playVideoOnLowPower, {
        once: true
    });
}

try 4.我目前正在研究更多的布尔属性,包括unbind&amp;rebind方法、Delegation方法、SetTimOut和SetInterval方法,但还没有成功.

推荐答案

创建一个保存点击计数的标志,例如,我在这里创建了var clickCount = 0;,并在调用playVideoOnLowPower()时将其增加,并在ajaxCall成功时将其重置为0.还要判断playVideoOnLowPower方法中的clickCount值,如果它大于0,则不做任何操作而返回,否则执行您的逻辑.请参见下面的示例.

var clickCount = 0;

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
  get: function() {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
  }
});

document.body.addEventListener("click", playVideoOnLowPower);
document.body.addEventListener("touchstart", playVideoOnLowPower);

function playVideoOnLowPower() {
  try {
    if (clickCount > 0) {
      return;
    }
    clickCount = 1;
    const videoElements = document.querySelectorAll("video");
    for (i = 0; i < videoElements.length; i++) {
      if (videoElements[i].playing) {
        // video is already playing so do nothing
        console.log('Playing');
      } else {
        // video is not playing so play video now
        videoElements[i].play();
        console.log('Not Playing');
      }
    }
  } catch (err) {
    console.log(err);
  }
}

$("#getVideo").off("click").on("click", function() {
  getVideo()
});

function getVideo() {
  $.ajax({
    url: 'https://dummyjson.com/http/200/mov_bbb.mp4',
    success: function(data) {
      if (data.status == 200) {
        var videoHtml = `<video width="400" controls>
                           <source src="https://www.w3schools.com/html/${data.message}" type="video/mp4">
                       </video>`;
      }
      $('#main2').append(videoHtml);
      videoEvents();
      clickCount = 0;
    }
  });

}

function videoEvents() {
  $("video").on('play', function() {
    $(this).prop('muted', false);
  });

  $("video").on('pause', function() {
    $(this).prop('muted', true);
  });

  $("video").on('ended', function() {
    $(this).prop('muted', true);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main2"></div>
<button id="getVideo">Add next video</button>

Javascript相关问答推荐

如何使用JavaScript对切换的声音设置音量

强制执行useStatego struct 化变量[foo,setFoo]的命名约定?

获取加载失败:获取[.]添加时try 将文档添加到Firerestore,Nuxt 3

GrapeJS -如何保存和加载自定义页面

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

如何在Angular中插入动态组件

角色 map 集/spritebook动画,用户输入不停止在键上相位器3

如何从Intl.DateTimeFormat中仅获取时区名称?

Regex结果包含额外的match/group,只带一个返回

我的角模板订阅后不刷新'

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新?

制作钢琴模拟器,并且在控制台中不会执行或显示该脚本

使用Google API无法进行Web抓取

当id匹配时对属性值求和并使用JavaScript返回结果

Eval vs函数()返回语义

Reaction Redux&Quot;在派单错误中检测到状态Mutations

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

无法重定向到Next.js中的动态URL

如何通过Axios在GraphQL查询中发送数组

AG-GRIDreact 显示布尔值而不是复选框