Question

我目前正在开发一个网页作为业余爱好项目，其中包含一些使用jquery和css3的简洁动画，它们响应用户在页面上拖动鼠标的方式。以下是我如何处理它的摘要，以便您可以解决我的真正问题。

我在页面底部有一个div作为传感器。如果我单击此元素并使用鼠标拖动，一些动画（主要是一些播放过渡）将在主页面上播放。

<div class="someclass"></div>

Jquery的

$someclass = $('.someclass');

$someclass.mouseenter(function() {


//do something
 $someclass.mousedown(function(ed) {
   //several things with ed.pageX, ed.pageY coordinates

  $someclass.mousemove(function(em){
      //plenty of things with em.pageX, em.pageY coordinates
});

 }).mouseup(function() {
$someclass.unbind('mousdown');
});

 }).mouseleave(function(){

       $someclass.unbind('mouseenter');

});

一切正常，但由于这是点击和拖动密集，因此一些文本元素会突出显示。我在网上寻找解决方案但是使用preventDefault（）进行mousedown，如其他答案中所建议的那样对我不起作用。它没有对mousedown（）事件做任何事情，所以我不想要那样做。

在CSS上使用:: selection并将背景设置为Transparent也不能提供所需的结果。该文本仍然保持突出显示。

我一直在禁用用户选择css上的一些建议，这是我生命中浪费的另一天。

所以我想到了一个黑客。我没有使用div，而是使用了输入字段。

我知道当你单击文本字段并在其外面拖动时，它不会选择页面上的任何其他文本。（它会将吸盘锁定在框中，所以是的！）所有事件，如mousedown，mousemove和显然，一切都很顺利。所以我继续进行修改，一切运作良好！

但是有一个问题。当我单击此输入字段并拖动时，它仅将焦点放在第一次单击上。我必须再次单击并拖动它才能使动画生效。我试过了 $ someclass.focus（）在文档就绪时也会被聚焦，但除非我实际点击输入字段，否则它会拒绝检测我的mousemove（）。

我在$ someclass.mouseenter（）上触发了$ someclass.mousedown（）。现在，如果我进入离开并再次输入此元素，我可以单击并拖动所有动画。因此，这种情况下无需单击文本字段两次。

我尝试触发mouseenter，mouseleave e.t.c.多种组合，只需在没有鼠标帮助的情况下将这个愚蠢的文本集中在一起。

但我希望这能正常运作。我猜我必须使用mouseenter（），但我只是烧掉了尝试。我四处搜索，看看是否有人使用这种方法但是没有，甚至没有什么接近我正在寻找的东西。

提前感谢您的帮助。

干杯！

Answer 1

您必须将背景设置为无：

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

现在它应该可以工作。

更好的方法是：

.[your div class] {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.[your div class] input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

使用输入框阻止文本选择突出显示

Jquery的

1 个答案: