jQuery - 檢測點擊在某個像素區域，然後執行功能

我目前有一個div，我們稱之爲#videodiv，其中包括一個HTML5視頻播放器（SublimeVideo，但可能是不相關的信息）。在頁面加載時，#videodiv只有100px。當用戶點擊#videodiv中的任何地方時，我想讓jQuery將div擴大到250px。jQuery - 檢測點擊在某個像素區域，然後執行功能

你可能會說 - 這就像一個jQuery函數一樣簡單，只需使用點擊然後動畫！而你是對的，只是......

這裏的問題：被包含在#videodiv和填充整個DIV的HTML5視頻播放器捕獲發生的所有點擊。這是爲了觸發播放器的播放/暫停功能，但隨後不允許任何程序員爲包含div設置jQuery點擊功能。

幸運的是，在這種情況下，#videodiv是一個100％全身寬的div，其精確高度爲100px。因此，考慮到上述問題，另一種方法是確定是否可以在頁面的前100個像素中捕獲HTML文檔（而不是div）中的任何點擊，然後觸發該功能。

換句話說，我們如何使用jQuery在頁面的前100個像素內的任意位置檢測鼠標點擊，然後將div videodiv設置爲250px？

替代/更好的解決方案是絕對是比歡迎，但jQuery是首選的方法。

來源

2013-02-20 Andy Dwyer

我已經解決了與設在一個單獨的StackOverflow問題如下回答這個問題，設在這裏：Detect when an HTML5 video finishes

這是隻有兩個步驟的問題：

檢測onplay與jQuery
運行jQuery函數

正如您所見，HTML5非常簡單;我只希望文檔更容易訪問/搜索。

來源

2013-02-21 01:43:53

像這樣的東西應該工作 - 更改寬度和高度值以符合您的需求。 pageX是橫向的，並且pageY是垂直的，所以我剛剛在左上角映射了一個100x100的空間。改變這種狀況，以滿足您的需求，以及：

// Bind the click event to the body - any static parent container will do 
$('body').on('click', function(e) { 

    // Fire the callback if the click was in the top 100px by 100px 
    if (e.pageX <= 100 && e.pageY <= 100) { 

     // Prevent crazy animations and redundant handling 
     $(this).off('click'); 

     // Scale the video to the appropriate size 
     $('#videodiv').animate({ 
      width : '250px', 
      height : '250px' 
     }, 1000); 
    } 
});

這裏有一個演示：http://jsfiddle.net/bKm4U/

來源

2013-02-20 19:02:58 AlienWebguy

只需將該視頻大小調整邏輯設置爲一個函數，並將其綁定到主體點擊以及video.play（）事件。然後這兩個行動將大小div。 – AlienWebguy 2013-02-20 19:43:04

jQuery - 檢測點擊在某個像素區域，然後執行功能

回答

相關問題