javascript - HTML 浏览器 "text"选择 : select whole words (like in iBooks)

Question

我有一个结构:

<span class="word">This</span><span class="word">is</span><span class="word">the</span><span class="word">text</span><span>.</span>

我希望用户能够选择整个单词 (spans, class="words")(在桌面和 iOS 上的浏览​​器中 - 就像在 iBooks 中一样)。

我如何使用 css 设置样式？

正确的做法是什么？ (之前没有使用选择)

谢谢。

Answer 1

我知道您没有提到 jQuery - 但对于这种动态的东西，我认为使用它是非常明智的。

将整个交易包装在一个 div 中。

<div id="wordSelector"><spans></div>

然后将 mousedown 事件附加到 div。使用信号量确保仅在鼠标按下期间处理事件。捕获 span 上的鼠标悬停事件，直到注册 mouseup 事件。

注意:这些事件可能需要附加到 document 而不是 div，以确保处理在 div 之外但进入 div 的 mousedown 事件，以及在 mouseup 事件在 div 之外的情况下处理 mouseup .

var spansTouched = [];
var mouseDown = 0;
$("#wordSelector").mousedown( function(){
 //track spans touched with a semaphore
 mouseDown++;
});
$("#wordSelector").mouseup( function(){
 mouseDown = 0;
 //handle spansTouched and then reset it to []
});
$(".word").mouseover( function(){
 if(mouseDown > 0){
  spansTouched.push(this);
 }
});

显然这里还有改进的余地，这只是为了强调使用信号量和鼠标事件的可能方法。