stopPropagation似乎沒有工作

我想實現一個鏈接裏面的一個點擊事件的DIV塊。stopPropagation似乎沒有工作

我想要外部的DIV點擊事件不運行，如果用戶點擊鏈接。

我的鏈接看起來像：

<a href="javascript: openVideo('videoID', this, event); " >Watch the video</a>

和JavaScript的樣子：

function openVideo(video, object, event) { 

    $(object).html($(object).html()+"<iframe width='360' height='315' src='http://www.youtube.com/embed/"+video+"' frameborder='0' allowfullscreen></iframe>"); 

    event.stopPropagation(); 
}

不幸的是，當我點擊鏈接它執行外DIV代碼。並顯示與stopPropogation方法有關的錯誤：

Uncaught TypeError: Cannot call method 'stopPropagation' of undefined

可能是什麼問題？

來源

2012-06-25 Arturs Vancans

因爲沒有事件被調用。嘗試調用它像這個：

<a href="#" onclick="openVideo('videoID', this, event); " >Watch the video</a>

來源

2012-06-25 18:58:06 j08691

這完美的作品！因此，當我在href中寫入查詢時，它不會被視爲點擊事件？ –

@Arturs我認爲你仍然需要'return false;'來防止瀏覽器在被點擊時滾動到頁面的頂部。 – sparebytes

@Kranklin我可以只添加javascript：void（）;在href部分？ –

我看到你使用jQuery。這並不意味着以這種方式使用。您傳遞的事件對象是瀏覽器的本機事件對象。 jQuery的事件對象提供了一個stopPropagation函數。

要正確使用jQuery，必須讓jQuery綁定事件而不是內聯。

<a href="#" class="openVideo" data-video="videoID" >Watch the video</a> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     $(".openVideo").click(function(ev) { 
      ev.preventDefault(); 
      ev.stopPropagation(); 
      var videoID = $(this).data('video'); 
      $(this).append("<iframe width='360' height='315' src='http://www.youtube.com/embed/"+videoID+"' frameborder='0' allowfullscreen></iframe>"); 
     }); 
    }); 
</script>

編輯：用jQuery 1.4.3或以上，你可以使用委託，所以你不必事件直接連接到錨，而是它的一個祖先做。（jQuery 1.7使用.on方法來實現同樣的事情）。 下面是使用jQuery 1.7個例子： http://jsfiddle.net/Tu9Hm/

<a href="#" class="openVideo" data-video="videoID" >Watch the video</a> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     $(document).on('click', '.openVideo', function(ev) { 
      ev.preventDefault(); 
      ev.stopPropagation(); 
      var videoID = $(this).data('video'); 
      $(this).append("<iframe width='360' height='315' src='http://www.youtube.com/embed/"+videoID+"' frameborder='0' allowfullscreen></iframe>"); 
     }); 
    }); 
</script>

你付出使用委託一個小的性能損失，所以儘量把該事件在DOM中最低的元素。此外，如果您將委託的文件，你不能真正stopPropagation因爲它已經達到了頂級，但我相信你真的更關心preventDefault()

來源

2012-06-25 19:01:05 sparebytes

這就是我的想法（你需要jQuery for'stopPropagation'），但事實並非如此。 –

@丹濤我知道Chrome支持它，但IE可能不支持。 – sparebytes

我喜歡你的解決方案。唯一的問題是我的數據（鏈接）是由來自不同url的ajax加載的，所以我需要將這段代碼添加到每個我有鏈接的網址中。就好像我只在主頁面加載準備就緒時運行它一次，當接收到小的ajax數據時它不會再運行，因此如果我點擊新的數據就不會執行代碼。 –

-2

嘗試

$("a").on("click", function (e) { 
      e.stopPropagation(); 
     });

來源

2012-06-25 19:01:43

這會打破頁面上的所有其他鏈接。 – sparebytes

編輯：我說謊了; stopPropagation是not a jQuery exclusive。去j08691's answer。

~~據我所知 stopPropagation是一個jQuery函數，這意味着您需要由jQuery事件處理程序創建的事件對象來調用它。~~

這裏有一種方法：

<a id="open-video-link" href="javascript: void(0);">Watch the video</a> 

<script type="text/javascript"> 
    $("#open-video-link").click(function(event) { 
    openVideo("videoID", this, event); 
    }); 
</script>

採取什麼我只是一粒鹽，當然，寫，因爲我打算過朦朧的知識，並沒有看它在所有。

來源

2012-06-25 19:02:10

每個鏈接都有唯一的videoId，因此我認爲用參數調用一個函數並且不要捕捉點擊事件更容易。 –

stopPropagation似乎沒有工作

回答

相關問題