event.preventdefault() 问题 - 试图阻止加载锚标记

Question

我正在设置一个动态且响应迅速的视频库，您在其中单击缩略图，它会在其上方较大的 <div> 中加载随附的视频。我运行遇到的问题是 event.preventdefault() 显然不起作用，因为它仍然链接到 YouTube 而不是加载它。感谢任何帮助。

HTML

        <div class="mainvideo">
            <iframe src="https://www.youtube.com/watch?v=UAQ9-sl13zg" frameborder="0" allowfullscreen></iframe>
            <div id="mainvideowords">
                <h2>#</h2>
                <h3>#</h3>
            </div>
        </div>

        <div id="videogallery">

            <div class="littlevideo">
                <a href="https://www.youtube.com/embed/HsuzKk6udK8" class="video1"><img src="assets/placeholder.png"></a>
                <div class="littlevideowords">
                    <h4>#</h4>
                    <p>#</p>
                </div>
            </div>

JS

$(".video1, .video2, .video3").on("click", function(event) {
    event.preventDefault();
    $(".mainvideo iframe").prop("src", $(event.currentTarget).attr("src"));
});

Answer 1

虽然没有回答为什么 event.preventDefault() 不起作用，但我将如何处理这个问题。我会将 html 调整为如下所示：

<div class="mainvideo">
   <iframe id="playVideo" src="https://www.youtube.com/watch?v=UAQ9-sl13zg" frameborder="0" allowfullscreen ></iframe>
 // notice ^^^^^^^^^^^^^^
        <div id="mainvideowords">
       // rest of your code

<div id="videogallery">
    <div class="littlevideo">
        <div data-link="https://www.youtube.com/embed/HsuzKk6udK8" class="video1">
       // notice ^^^^^   
    <img src="assets/placeholder.png"></div>

那么您的 jquery 将如下所示：

$(function(){
    $('div[class^="video"]').click(function(){
        var src = $(this).data('link');
        $('#playVideo').prop('src', link);
    });
});

或 select 开头的任何 div 其 class 以 'video' 开头，因此您不必重复视频 1 、video2 等。然后，我们将自定义 html5 数据属性添加到我们使用 .data('src') 行访问的单击 div。请在此处查看文档：http://api.jquery.com/data/ and https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes.

最后，通过向我们的 iframe 添加一个 id，我们可以直接 select 它并更改视频的 src。

这里有一个 fiddle 给你：http://jsfiddle.net/1sLdkyr2/1/

event.preventdefault() 问题 - 试图阻止加载锚标记

event.preventdefault() issues - Trying to stop an anchor tag from loading

html

javascript

jquery

jquery-events