jQuery - 單擊和雙擊 - jEditable

我很努力地找到'正確'的方法來構建以下內容。jQuery - 單擊和雙擊 - jEditable

我有一個td單元格中有一個標題（在一個更大的表格中）。這個TD有一個點擊事件來打開一個子菜單。我已經在這個標題上實現了jEditable的內聯編輯，包裝在一個div類中。

簡化：

<tr> 
.... 
    <td class="menuopener"><div class="editable">TITLE</div></td> 
... 
</tr>

我有格設置爲通過靶向上DBLCLICK的jEditable。

由於該div接管了整個單元格，因此menuopener click事件從不會觸發。

如果我改變div來顯示：inline，我可以得到單元格的「剩餘部分」來使菜單開啓器觸發。

但是，當我雙擊，我不想要菜單打開，因爲這不是用戶打算現在做......他們想要更新標題。

那麼，什麼是「最好」的方式來做到這一點......不一定是代碼明智的，但人爲因素明智。延遲跟蹤器是一個想法嗎？改變菜單觸發雙擊和編輯單，但它的同樣的問題，只有倒退.....

想法？

來源

2013-04-10 briansol

也許[這]（http://stackoverflow.com/questions/5471291/javascript-with-jquery-click-and-double-click-on-same-element-different-effect）可以幫助你。 – Eich 2013-04-10 14:37:48

無論標頭的大小如何，事件總是會起泡。當標題雙擊偵聽器觸發時，菜單選擇器的點擊偵聽器將始終首先觸發兩次。 Demo。

如果點擊目標是您的標題，則需要將菜單打開程序限制爲雙擊的閾值。

$('.menuopener').click(function(e) { 
    var delay = $(e.target).is('.editable') ? 200 : 0; 
    window.clearTimeout(window.openMenuTimeout); 
    window.openMenuTimeout = window.setTimeout(function() { 
     // your menu opener code 
    }, delay); 
}); 

$('.editable').dblclick(function(e) { 
    window.clearTimeout(window.openMenuTimeout); 
    // your editable code 
});

Demo

你可能確實想使你的編輯inline-block，利用該功能，菜單首戰僅被延遲，如果可能最終點擊是雙擊後一個例子實際上是.editable。

來源

2013-04-10 14:43:23

謝謝！我非常喜歡這個概念。但我不知道如何將它的第二部分與可編輯調用集成在一起。它使用元素後的'.editable'命令（click或dblclick去），從而攔截click事件，並在發生任何超時/等事件之前觸發。對此有何洞見？ – briansol 2013-04-11 15:59:36

@briansol：啊，是插件的可編輯註冊的事件監聽器嗎？那麼我相信這個插件提供了一些鉤住自己代碼的回調函數。您需要確保clearTimeout調用是在發生可編輯事件時進行的，以便菜單開啓器不會啓動。 – 2013-04-11 22:30:45

yes，jEditble是一個插件，它被稱爲$（'＃el'）。（{PARAMS ....}）; – briansol 2013-04-12 13:23:20

jQuery - 單擊和雙擊 - jEditable

回答

相關問題