僅在雙擊時激活鏈接

我正在爲我的網站構建一個非常簡單的基於Web的文件瀏覽器。僅在雙擊時激活鏈接

我已經將我的鏈接命名爲類似文件，我希望能夠通過單擊來選擇它們，以便我可以執行重命名等操作，並且我希望能夠雙擊來實際激活鏈接並下載文件。

我想出了以下內容，但它看起來很醜。有沒有人有更優雅的解決方案？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Untitled Document</title> 

<script type="text/javascript"> 

function nullClick() 
{ 
    //do select stuff 
    return false; 
} 

function dolink(link) 
{ 
    window.location(link.href); 
} 

</script> 

</head> 

<body> 

<a href="http://pathtofile" onclick="return nullClick();" ondblclick="dolink(this);">Clicky</a> 

</body> 
</html>

來源

2009-11-10 MalphasWats

它看起來像一個合理的辦法......你有什麼不開心的呢？ – jheddings 2009-11-10 18:32:00

這是'dolink（this）'和'window.location = ...'，當鏈接以非混亂形式很好地工作時，感覺很笨拙。我可能會將其重新設置爲「逐步增強」，系統已經爲每個文件顯示了一個包含重命名/刪除等選項的新頁面，我只是想讓它變得有點爵士樂。 – MalphasWats 2009-11-10 18:43:28

我所能提供的唯一反饋是人們期待鏈接的工作方式......只要你適當地設計它，以免讓人混淆，我認爲這是一個很好的方法。如果你有一個框架來幫助你，它可以幫助你從HTML中解決一些「混亂」問題。 – jheddings 2009-11-10 18:49:35

我會避免這樣做，因爲它違背了用戶的期望如何選址網站向功能，但如果你一定要，你這樣做是我所知道的唯一出路的方式。

另外，如果javascript被禁用或不可用，您應該知道該網站將回退到可單擊的鏈接。

來源

2009-11-10 18:30:39

我同意，網站它真的只爲我自己使用，'nullClick'方法實際上會重新鏈接看起來'選定'。 – MalphasWats 2009-11-10 18:33:35

他需要的不僅僅是忽略onclick，因此在示例中，nullClick（）函數確實有意義。再次閱讀這個問題 - 「我希望能夠通過單擊來選擇它們，以便我可以執行重命名等操作」 – 2009-11-10 18:35:36

我明白了，然後忽略我之前對刪除函數的評論。我編輯了我的答案。 – 2009-11-10 18:43:02

<a href="http://pathtofile" onclick="return false" ondblclick="window.location = 'some where'">Clicky</a>

我認爲這將是一個代碼行更優雅的解決方案。

來源

2009-11-10 18:32:20 Tarik

如果你沒有使用任何JavaScript框架，那可能就像它得到的那樣好。你可以擺脫你的職責;

<a href="..." onclick="return false;" ondblclick="location.href='...';">Foobar</a>

來源

2009-11-10 18:32:35

如果你不反對小jQuery：

$("#yourLinkId").dblclick(function() { 
     window.location($(this).attr("href")); 
    });

來源

2009-11-10 18:37:29

不是jQuery的粉絲，感覺太像作弊了:) – MalphasWats 2009-11-10 18:39:11

我知道你的意思，但使用它五分鐘後，我被賣了:) – Thomas 2009-11-10 18:43:19

爲什麼不作弊，當你可以？ – 2009-11-10 18:43:54

有關使用jQuery如何？

HTML例如：

<a href="javascript:alert('link1')" class="dblclick">link1</a><br> 
<a href="javascript:alert('link2')" class="dblclick">link2</a><br> 
<a href="javascript:alert('link3')" class="dblclick">link3</a><br>

jQuery的例子：

$('a.dblclick') 
    .bind('click', function() { return false; }) 
    .bind('dblclick', function() { window.location = this.href; });

SSCCE：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(init); 
      function init() { 
       $('a.dblclick') 
        .bind('click', function() { return false; }) 
        .bind('dblclick', function() { window.location = this.href; }); 
      } 
     </script> 
    </head> 
    <body> 
     <a href="javascript:alert('link1')" class="dblclick">link1</a><br> 
     <a href="javascript:alert('link2')" class="dblclick">link2</a><br> 
     <a href="javascript:alert('link3')" class="dblclick">link3</a><br> 
    </body> 
</html>

來源

2009-11-10 18:41:00 BalusC

僅在雙擊時激活鏈接

回答

相關問題