使用DIV作为按钮时保持文本选择

Question

也许这是与浏览器相关的问题？我现在在Chrome上...

我想要完成的是允许用户使用光标保存他们在页面上选择(突出显示)的文本.

我有javascript/jQuery/ajax所有设置......当我通过控制台测试它时它就像一个魅力.

即 - 我选择一些文本,然后运行此命令.

alert(getSelected());

我得到一个包含所选字符的警报弹出窗口.......所以它在理论上有效.

但是 - 当我想使用按钮拨打电话时,发生的事情是文本选择消失了FIRST,因此我无法查看/保存他们选择的内容.

<script>
$('#save').click(function(){
  var selected_text = getSelected();
});
</script>

<div id="save"><img src="the_save_button.jpg" height="50" width="50" /></div>

有没有办法在点击/点击"保存"DIV后保持文本选择？

开放给任何和所有解决方案!谢谢!

Answer 1

一个简单的选择是使用mousedown而不是click.但是,这与按钮的本机行为不同,即在释放鼠标按钮时触发动作,因此UI不是很好.

另一种选择是使用专有CSS属性和unselectableIE和Opera属性的组合使可点击元素不可选,这可以防止点击清除选择:

演示:http://jsfiddle.net/timdown/UUQJs/

CSS:

.unselectable {
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

HTML:

<div id="save" unselectable="on" class="unselectable"><img
   src="the_save_button.jpg" height="50" width="50" unselectable="on" /></div>