如何存储与网页任何部分相关的用户反馈？答案

【问题标题】：How can I store user feedback related to any part of a web page?如何存储与网页任何部分相关的用户反馈？
【发布时间】：2009-01-14 02:14:39
【问题描述】：

我希望用户能够双击屏幕上的任意位置以显示允许提交有关该位置的反馈的表单。

我能想到 2 个解决方案：

存储 X、Y 坐标。由于并非所有浏览器都支持 X,Y 坐标，因此必须排除这一点。

使用 Jquery 将详尽的 html 实体列表绑定到 dblClick 事件，如下所示：

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

});

因此，在上面的示例中，当双击任何 p、标签、输入或文本区域时，将显示反馈表单（为简单起见，我的示例中不包含传递被双击项目 ID 的代码)。

所以 2 并不完美，但它似乎可以解决有关受支持的 html 实体列表的任何反馈。

我忽略了一些更简单的解决方案吗？

另外，如果我选择 2，双击是参与此反馈表的最佳方法，还是您会推荐其他活动？

【问题讨论】：

标签： javascript jquery feedback

【解决方案1】：

您应该能够编写/获取一个命中测试函数来查看双击鼠标光标时的 DOM 元素，然后将 cmets/feedback 文本与所选的 ID 相关联元素

这假设您的所有 DOM 元素都有唯一的 ID

（并且您的用户知道他们可以做到这一点！）

【讨论】：

【解决方案2】：

我建议不要让网站上的任何点可评论，而是允许对特定元素进行评论。例如，如果它是一个博客，您可以将每个段落用作可以评论的元素。如果它是一个代码存储库，则可以将 cmets 添加到单独的代码行中。

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

【讨论】：

此页面在 Opera 中似乎无法使用。也许更好的链接是：djangobook.com/about/comments

【解决方案3】：

我希望你的大部分布局都使用

和标签。正如 Steven 建议的那样，为每个块元素或作为网页不可或缺的一部分的任何其他元素（可能是图像）关联唯一的 id。

具有与块/布局元素相关联的 onclick 事件以打开另一个窗口或 javascript 弹出窗口，捕获元素 id 并在弹出窗口中有一个表单，用户可以在其中提交反馈。

我还建议使用 onmouseover 甚至与所有这些元素相关联，并显示一个工具提示，指示用户可以留下有关该布局小部件/元素的反馈。

【讨论】：

【解决方案4】：

双击不好，因为在大多数浏览器中，您可以通过双击来选择单词。

相反，页面上应该有一些特殊的地方，您可以单击以提供反馈。请参阅 Soviut 的回答以获取一个很好的示例。

【讨论】：

【解决方案5】：

你可以这样做：

您希望被评论的块有一个“可评论”类并有一个 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 );

【讨论】：

【解决方案6】：

我有点喜欢第二种解决方案，但我不会将函数附加到某些 html 实体，而是附加到定义明确的 div 类似：

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

所以你只需要在<div class="commentable"> .. </div>中包装你想要评论的所有元素

使用第一种解决方案，如果您希望在页面的每个地方都有反馈，而不仅仅是指定的元素，JQuery 可以帮助您

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

请参阅JQuery doc 了解更多信息。

【讨论】：