マウスがダウンしている間にテキスト選択をトリガします（mouseupまでwindow.getSelection（）が空です）

Question

マウスアップが発生するまでwindow.getSelection()が空であるようです。私はクリックされた単語を取得してマウスアップで選択することができますが、マウスアップが発生する前にmousedownでこれを行う必要があります。以下のjsfiddleの例では、マウスを起動しています（正常に起動しました）が、物理的なマウスアップが発生するまでテキストの選択はまだ空です。

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）マウスがまだダウンしている間にトリガする別の方法はありますか？

Answer 1

mousedownイベントでwindow.getSelection（）を呼び出すだけです。しかし、それは戻ってがmousedownの前に選択されたことを覚えておいてください。

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

 
function app_init() { 
 
\t container = $('div'); 
 
\t selection = false; 
 
    word = false; 
 
    start = false; 
 
    end = false; 
 
    
 
    if(window.getSelection) { 
 
    \t selection = window.getSelection(); 
 
    selection.empty(); 
 
    } else { 
 
    \t alert('Please update your browser to use this application.'); 
 
    } 
 
    
 
    container.mousedown(function(e) { 
 
    \t $('.result').text($('#word').text()); 
 
    }); 
 

 
    container.mouseup(function(e) { 
 
    \t mouse_release(e); \t 
 
    }); 
 

 
} 
 

 
function mouse_press(e) { 
 
\t $(e.target).trigger('mouseup'); 
 
    //container.trigger('mouseup'); 
 
    //handle_selection(); 
 
} 
 

 
function mouse_release(e) { 
 
\t handle_selection(); 
 
} 
 

 
function handle_selection() { 
 
\t selection = window.getSelection(); 
 

 
    if(selection.isCollapsed) { 
 
    
 
\t \t selection.modify('move', 'forward', 'character'); 
 
\t \t selection.modify('move', 'backward', 'word'); 
 
\t \t selection.modify('extend', 'forward', 'word'); 
 
    
 
\t \t 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',''); 
 
});

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; 
 
}

<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>

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

編集：今のMouseMoveを使用して、マウスをドラッグしながら、強調表示されたテキストを示しています。結果を表示するにはスニペットを展開する必要があります。

編集2：今すぐホバー上の単語を検出し、マウスでそれをキャプチャします。