2016-11-16 94 views
1

我想在用戶單擊錨標記時執行兩個操作。錨標記將具有視頻鏈接。這個想法是當用戶點擊一次錨點標籤時,URL將在新窗口中打開,當用戶雙擊標籤時,它將使用html5下載屬性來啓動下載。運行單擊並雙擊錨標記

<a class="movie-media-download-link" href="http://example.com/video.mp4" download=""></a> 


jQuery(document).on("click", ".movie-media-download-link", function(e) { 
    e.preventDefault(); 
    // window.location.href = jQuery(this).attr('href'); 
}); 
jQuery(document).on("dblclick", ".movie-media-download-link", function(e) { 
    jQuery('.movie-media-download-link').unbind('click'); 
}); 

在使用中防止默認點擊然後在雙擊html5的下載屬性停止工作。即使在我解綁的事件,然後也不起作用。

+0

點擊是一次雙擊,首先發生,並且總是發生。 – adeneo

+1

如果您使用單獨的按鈕進行這些操作會更好。對於最終用戶來說,這也會更直觀。 – Vaidas

+0

你說得對。但是有沒有辦法可以建立這個? –

回答

2

你必須自己創建雙擊功能,並使用延遲常規點擊檢查它是否實際上是雙擊等

jQuery(document).on("click", ".movie-media-download-link", function(e) { 
 
    e.preventDefault(); 
 

 
    var self = this, time = 500; 
 

 
    if ($(this).data('flag')) { 
 
     clearTimeout($(this).data('timer')); 
 
     var a = document.createElement('a'); 
 
      a.href = self.href; 
 
      a.download = ""; 
 
      a.click(); 
 
    } else { 
 
     $(this).data('timer', setTimeout(function() { 
 
      window.location.href = jQuery(self).attr('href'); 
 
     }, time)); 
 
    } 
 

 
    $(this).data('flag', true); 
 

 
    setTimeout(function() { 
 
     $(self).data('flag', false); 
 
    }, time); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="movie-media-download-link" href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" download="">Click once to play, twice to download !</a>

+0

瀏覽器接受雙擊的標準時間是500ms,所以它可能是值得改變定時器到500. –

+0

@Antonvb - 好建議,我只設置400ms,因爲它似乎是正確的,但Windows使用500毫秒作爲默認設置*(它是基於操作系統的)* – adeneo

+0

你好,感謝你的回覆,你的代碼工作完美,但我希望下載的東西在雙擊時開始,而不是單擊我的問題。那可能嗎 ? –

0

我會建議如果你真的希望這兩個事件綁定在同一個元素上,使用定時器結構。

例子:

var isDblclick = false; 

$('#element').on('click', function() { 

    setTimeout(function() { 

     if(!isDblclick) { 
     //Run your single click here 
     } 

    }, 500); 

}); 

$('#element').on('dblclick', function() { 

    isDblclick = true; 
    //Run your dbl click functionality here 
    isDblclick = false; 

}); 

現在的延遲是不是最佳的,所以我建議你實現在信號而你決定要觸發這些動作的用戶有事情發生在按鈕上有微調。

如果你不想延遲,我建議分開不同按鈕上的兩個事件。