0

我目前正在开发一个网页作为一个爱好项目，其中包含一些使用 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 并将背景设置为透明也不能给我所需的结果。文本仍然保持突出显示。

我尝试禁用某些人建议的 css 上的用户选择，这在我的生活中又浪费了一天。

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

我知道，当您单击文本字段并将其拖到外部时，它不会选择页面上的任何其他文本。（它会将吸盘锁定在框中，所以是的！）所有事件，如 mousedown、mousemove 和所有的工作嗯，很明显。所以我继续进行修改，一切正常！

但是有一个问题。当我单击此输入字段并拖动时，它仅将其集中在第一次单击上。我必须再次单击并拖动它才能使动画正常工作。我在准备好文档时尝试了 $someclass.focus()，它也获得了焦点，但是除非我物理单击输入字段，否则它拒绝检测到我的 mousemove()。

我在 $someclass.mouseenter() 上触发了 $someclass.mousedown()。现在，如果我在这个元素上输入 leave 并再次输入，我可以单击并拖动，所有动画都可以工作。所以这种情况下不需要点击文本字段两次。

我尝试触发 mouseenter、mouseleave 等多种组合，以便在没有鼠标帮助的情况下让这个愚蠢的文本聚焦。

但我希望它能够正常工作。我猜我必须与 mouseenter() 一起工作，但我只是精疲力尽地尝试。我四处寻找，看看是否有人在使用这种方法，但不，甚至没有接近我正在寻找的东西。

在此先感谢您的帮助。

干杯!

4

1 回答 1

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; 
 }
于 2013-04-04T07:23:27.537 回答