Question

似乎window.getSelection()在发生mouseup之前是空的。我能够获得点击的单词并在mouseup上选择它，但我需要在mousedown上执行此操作（在mouseup发生之前）。在下面的jsfiddle示例中，我触发mouseup（成功触发），但文本选择仍为空，直到发生物理鼠标。

https://jsfiddle.net/aoznge7j/1/

$(function() {
    app_init();
});

function app_init() {
    container = $('div');
    selection = false;
    word = false;
    start = false;
    end = false;

    if(window.getSelection) {
        selection = window.getSelection();
        selection.empty();
    } else {
        alert('Please update your browser to use this application.');  
    }

    container.mousedown(function(e) {
        console.log('mousedown');
        mouse_press(e);
    });

    container.mouseup(function(e) {
        console.log('mouseup');
        mouse_release(e);   
    });

}

function mouse_press(e) {
    $(e.target).trigger('mouseup'); // this triggers the mouseup but selection is empty
}

function mouse_release(e) {
    handle_selection(); //physical mouseup works
}

function handle_selection() {
    selection = window.getSelection();
    //console.log(selection);

    if(selection.isCollapsed) {
        // this is how i am selecting the clicked word, and yes i know .modify is non-standard
        selection.modify('move', 'forward', 'character');
        selection.modify('move', 'backward', 'word');
        selection.modify('extend', 'forward', 'word');

        word = selection.toString();
        start = selection.anchorOffset;
        end = selection.focusOffset;

        console.log( 'word:'+word+' start:'+start+' end:'+end );

    }
}

还有其他方法可以在鼠标停止时触发文本选择（isCollapsed为true）吗？

Answer 1

只需在mousedown事件中调用window.getSelection（）。但请记住，它会返回在mousedown之前选择的内容。

container.mousedown(function(e) {
   selection = window.getSelection();
   console.log('mousedown='+ selection);
   mouse_press(e);
});

＆＃13;

$(function() {
	app_init();
});

function app_init() {
	container = $('div');
	selection = false;
  word = false;
  start = false;
  end = false;
  
  if(window.getSelection) {
  	selection = window.getSelection();
    selection.empty();
  } else {
  	alert('Please update your browser to use this application.');  
  }
  
  container.mousedown(function(e) {
  	 $('.result').text($('#word').text());
  });

  container.mouseup(function(e) {
  	mouse_release(e);  	
  });

}

function mouse_press(e) {
	$(e.target).trigger('mouseup');
  //container.trigger('mouseup');
  //handle_selection();
}

function mouse_release(e) {
	handle_selection();
}

function handle_selection() {
	selection = window.getSelection();

  if(selection.isCollapsed) {
    
		selection.modify('move', 'forward', 'character');
		selection.modify('move', 'backward', 'word');
		selection.modify('extend', 'forward', 'word');
    
		word = selection.toString();
    start = selection.anchorOffset;
    end = selection.focusOffset;

    
  }
}

// wrap words in i.ele
$(document).on('mouseenter', 'p',  function() {
    var $this = $(this);
    var word = $this.text().replace(/\b(\w+)\b/g, "<i class='ele'>$1</i>");
    $this.html( word );
});
// unwrap on mouseleave
$(document).on('mouseleave', 'p',  function() {
    $(this).find('i.ele').contents().unwrap().end().end().html()

});

// bind to each span
$(document).on('mouseenter', 'p i.ele',  function() {
    var word = $(this).css('background-color','#ffff66').text();
    $('#word').text(word);
});
 
$(document).on('mouseleave', 'p i.ele',  function() {     
    $('#word').text('');
    $(this).css('background-color',''); 
});

＆＃13;

div {
   border: 1px dotted orange;
   padding: 1em;
}
p {
  font-size: 1.5em;
  font-family: sans-serif;
}
.result {
  border: 1px #ccc solid;
  padding: 3px 10px;
  height: 30px;
}
i.ele {
  font-style: normal;
}
#word {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>
    This is some type of testing test.
  </p>
  <p class="result"></p>
  mousedown word: <span id="word"></span>
</div>

＆＃13;

编辑：现在显示使用mousemove拖动鼠标时突出显示的文本。您可能需要展开代码段以查看结果。

编辑2：现在检测悬停时的单词并在mousedown上捕获它。

鼠标停止时触发文本选择（window.getSelection（）为空，直到mouseup）

1 个答案: