2009-01-14 54 views
3

我希望用戶能夠在屏幕上的任意位置雙擊以顯示允許提交關於該位置的反饋的表單。如何存儲與網頁任何部分相關的用戶反饋?

我能想到的2個解決方案:

  1. 商店X,Y座標。由於X,Y座標不支持所有瀏覽器,因此必須排除此情況。
  2. 使用jQuery HTML實體的詳盡清單綁定到DblClick事件是這樣的:

    $(document).ready(function() { 
    $("p,label,input,textarea").bind("dblclick", function(e) { 
        $("#feedback_form").show(); 
    }); 
    

    });

所以,在上面的例子中,當任何P,標籤,輸入,或文本域被雙擊,反饋形式將顯示(代碼傳遞項的ID被雙點擊,不包含在我的例子是爲了簡單)。

所以2是不完美的,但似乎它會做的伎倆爲支持的HTML實體清單上的任何反饋。

有沒有更簡單的解決方案,我忽略了?

另外,如果我有2去,是雙擊用於接合這種反饋形式是最好的方法,或者你會推薦一些其他的活動嗎?

回答

2

,你應該能夠編寫/獲取命中測試功能,看看有什麼DOM元素(S)是在鼠標光標時,它是雙擊,然後將意見/反饋文本與的的ID相關聯所選元素

這是假定所有的DOM元素都具有唯一的ID

(和您的用戶知道他們能做到這一點!)

2

我建議沒有網站上的任何點可評論的,而是允許對特定元素進行評論。例如,如果它是博客,則可以將每個段落用作可以評論的元素。如果它是一個代碼庫,那麼評論可以被添加到單獨的代碼行中。

看一看如何The Django Book does commenting on paragraphs

+0

此頁面在Opera中似乎不起作用。也許更好的鏈接是:http://www.djangobook.com/about/comments/ – 2009-01-14 07:41:52

1

我希望你的大部分佈局使用<div>和<表>標籤。正如Steven所建議的,將獨特的ID與每個塊元素或任何其他元素(您的網頁的組成部分)(可能是圖像)關聯起來。

有一個與塊/佈局元素相關的onclick事件來打開另一個窗口或JavaScript彈出窗口,捕獲元素ID並在彈出窗口上提供用戶可以提交反饋的窗體。

我也建議即使所有這些元件以及該顯示工具提示,指示用戶可以留下有關佈局插件/元件反饋相關聯的的onmouseover。

0

雙擊是壞的,因爲在大多數的瀏覽器,你可以在他們選擇通過雙擊的話。

相反,應該在頁面上有特殊的地方,您可以點擊以提供反饋。看到Soviut的答案就是一個很好的例子。

0

你可以做這樣的事情:

,你想上有一類「commentable」,並有一個ID被註釋塊。
下面的腳本是適用於符合W3C標準的瀏覽器的概要,即需要使用attachEvent和全局事件對象。
傳播的事件沒有被取消,因此可評論塊內的可評論塊會每次觸發事件一次。
該事件的默認動作還沒有被取消,所以雙擊的文本仍然會被高亮顯示 - 也許你的對話框可能有'點擊轉義取消'動作?

function CommentDialog() { 
    //this is a fake CommentDialog object constructor 
    this.display = function(id) { 
     alert('you want to comment on the block with id: '+id+', which is outlined in red'); 
    } 
} 



window.addEventListener('dblclick', function(e){ 
    var target = e.target; 
    while(/commentable/.test(target.className) == false) { 
     // if we've hit the body tag then bomb out 
     if(target == document.body) { 
      return; 
     } 
     target = target.parentNode; 
    } 
    target.style.border = '1px solid red'; 
    var cmt = new CommentDialog(); 
    cmt.display(target.id); 
}, false); 
0

我還挺喜歡第二個解決辦法,但我不附加功能有一定的HTML實體,而是一個明確的div 類似:

$(document).ready(function() { 
    $("div .commentable").each().bind("dblclick", function(e) { 
     $("#feedback_form").show(); 
}); 
}); 

所以你只需要包裝你想成爲commentable在<div class="commentable"> .. </div>

有了第一個解決方案,如果你想在你的頁面,不僅指定元素的每一個地方反饋的元素,JQuery的可以幫助你

jQuery(document).ready(function(){ 
    $().click(function(e){ 
     alert(e.pageX +', '+ e.pageY); 
    }); 
}) 

查看JQuery doc瞭解更多信息。