2009-01-14 50 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了解更多信息。