jQuery的可點擊區域內創建一個盲區

隨着jQuery，jQuery-ui和UI主題之一（我很喜歡lightness）包括jQuery的可點擊區域內創建一個盲區

（多多包涵，有上，你可以跳到如果底部的問題你喜歡，只是想展示我如何到達我的位置）

（對不起，如果有任何錯誤或錯誤，我已經錯過了代碼，它確實有效，但是爲了便於閱讀而切斷了代碼）

我開始用標準draggable + Sortable提供的jQuery-UI項目：

// HTML 
<div id="leftColumn"> 
<ul id="pageElements"> 
<li class="ui-state-default ui-corner-all" id="html">Html</li> 
<li class="ui-state-default ui-corner-all" id="paragraph">Paragraph</li> 
<li class="ui-state-default ui-corner-all" id="image">Image</li> 
<li class="ui-state-default ui-corner-all" id="faq">FAQ</li> 
</ul> 
</div> 

<div id="rightColumn"> 
    <ul id="pageItems"></ul> 
</div> 

// JavaScript Code 
$("#pageItems").sortable({ 
    revert: true, 
    placeholder: 'ui-state-highlight', 
    tolerance: 'pointer' 
}); 
$("#pageElements li").draggable({ 
    connectToSortable: '#pageItems', 
    helper: 'clone', 
    revert: 'invalid' 
});

然後，我開始想好這將是增加一個DBLCLICK功能，允許從一個列表到另一個轉移的項目，而無需拖動有用的，所以我加了這一點：

$("#pageElements li").dblclick(function() { 
     copythis(this); 
    }); 

function copythis(elem) { 
    var selected = $(elem).closest("li").clone();  
    $("#pageItems").append(selected).html(); 
}

後來我想好了，現在我想DBLCLICK在pageItem並顯示編輯對話框

，所以我說：

<div id="itemDialog"></div> 


$("#itemDialog").dialog({ autoOpen: false, modal:true }); 
$("#pageItems li").live("dblclick", function() { 
    openDialog(this); 
}); 

function openDialog(elem) { 
    $("#itemDialog").dialog('open'); 
}

後來我想我要一個按鈕，當我將鼠標懸停在一個元素，讓我刪除，我還不如在那裏有太多的編輯路線：

var removeButton = '<span class="buttons"><span class="ui-edit ui-state-default ui-corner-all ui-icon ui-icon-pencil" title="edit">Edit</span><span class="ui-remove ui-state-default ui-corner-all ui-icon ui-icon-closethick" title="remove">Remove</span></span>'; 

$("#pageItems li").live("mouseenter", function() { $(this).append(addButton); }).live("mouseleave", function() { $(this).find(".buttons").remove(); }); 

    $(".ui-remove").live("click", function() { $(this).closest("li").remove(); }); 

    $(".ui-edit").live("click", function() { 
     openDialog(this); 
    });

所以現在這是很實用，我想要再添加一個「添加」按鈕，將pageElement，這樣的話我會拖，DBLCLICK和點擊一個按鈕的3個選項，所以添加代碼：

var addButton = '<span class="buttons"><span class="ui-add ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-e" title="Add">Add</span></span>';

從pageItem李

使用的代碼「現場懸停「再次：

$("#pageElements li").live("mouseenter", function() { $(this).append(addButton); }).live("mouseleave", function() { $(this).find(".buttons").remove(); }); 

$(".ui-add").live("click", function() { 
    copythis(this); 
});

我修改了copythis函數來允許包括按鈕：

這就是現在的我和我目前工作的問題。

如果你dblclick pageElement，它會複製元素（如預期的那樣）。

如果您點擊添加按鈕，也將複製一個新元素（如預期）。

因爲pageElement dblclick事件附加到pageElement li標籤，並且添加按鈕單擊事件在嵌套在該標籤內的span標籤上，如果我快速點擊添加按鈕，有時候我會得到dblclick事件觸發器，比pageItem列表中的一個元素要多。

我想要做的是爲圍繞添加按鈕項目的dblclick事件創建一個死區。

我願意接受任何想法。

乾杯

盧克

來源

2010-07-28 Luke Duddridge

如果你可以把它放在http://jsfiddle.net/，讓我們感覺它會很棒...... – Reigel 2010-07-28 12:08:12

yer tiz：http://jsfiddle.net/bZ3qs/ – 2010-07-28 12:13:16

好的，所以我找到了一個答案，可能不是最好的，但它的工作原理。

它是定義一個全局變量：對的現場活動

var clicked = 0;

然後UI添加該值設置爲1，然後設置超時延遲值重置回0：

$(".ui-add").live("click", function() { 
     clicked = 1; 
     copythis(this); 
     setTimeout(function() { clicked = 0;}, 100); 
    });

所以後來我pageElement DBLCLICK功能：

$("#pageElements li").dblclick(function() { 
     if (clicked == 0) { 
      copythis(this); 
     } 
    });

不理想，但它的工作原理。

來源

2010-07-28 13:31:46

我知道這是遠樂於助人，但我建議不要聽DBLCLICK - 這是一個）的工作方式不同在不同的客戶端 - 和jQuery並不能掩蓋它的所有，b）你不希望你的用戶雙擊，這很複雜。

來源

2010-07-28 12:46:51 tjp

jQuery的可點擊區域內創建一個盲區

回答

相關問題