在單擊時突出顯示文本（javascript jquery html）

當您在所有瀏覽器中雙擊某個單詞時，它們會自動突出顯示該單詞下的單詞。但是，是否有可能找到一種方法讓單一點擊發生同樣的事情？在單擊時突出顯示文本（javascript jquery html）

我想這可能涉及的事情是： - TextRange stuff; - 反應到的onclick的所有段落（或全身或DIV），......但後來我還沒有發現任何地方，說你怎麼能告訴瀏覽器：

「嘿請不要突出的是很酷的事情！文本就在鼠標下面......現在就是...即使我只點擊一下，也沒有雙擊。「

只是爲了澄清：我不要求突出一個div或段落內的全部文本（這將是相當簡單的，很多的解釋，給出了上計算器）。我也不想做任何事情，比如爲每個單詞插入十億個跨度。我希望能夠在瀏覽器中雙擊文本時獲得完全相同的功能，但只需單擊一下即可。

是的，我打算對選定的文本做些什麼。

2012-03-11 Nicholas Petersen

$('#content').click(function() { 
    $(this).dblclick(); 
});

瀏覽器可能會限制此行爲。例如，如果您試圖通過轉移或執行另一個事件來點擊（）不同的元素。以下的答案也可以幫助有：

Javascript with jQuery: Click and double click on same element, different effect, one disables the other

來源

2012-03-11 19:08:29

謝謝阿拉姆，非常有趣（和簡單）。不幸的是，沒有爲我工作。我在調試時看到，每次點擊都會調用該函數，所以這不是問題。所以它不起作用（在Chrome和IE中試用）。這可能與Mantion在下面說的有關：「我不認爲dblclick（）會模擬原生雙擊。」敏銳的觀察，可能爲什麼它沒有工作。可能有一種方法來模擬原生雙擊？ – 2012-03-12 01:07:46

在這個答案中，它延遲了雙擊的事件。我認爲當兩個事件處理程序同時被調用時，瀏覽器懷疑犯規行爲。 – 2012-03-13 23:49:08

一種凌亂的辦法，但使用這個你可以聽單擊每個單詞，然後模仿行爲。我不認爲dblclick（）會模擬原生雙擊，但使用這種方法你可能能夠實現你想要的。

腳本：

var words = $("p:first").text().split(" "); 
    var text = words.join("</div> <div>"); 
    $("p:first").html("<div>" + text + "</div>"); 
    $("div").click(function() { 
     $(this).css("background-color","yellow"); 
    });

HTML

<p> word1 word2 word3 </p>

小提琴

http://jsfiddle.net/tbpJT/1/

來源

2012-03-11 19:12:43 Sindre

有趣的做法，我用跨度更新http://jsfiddle.net/kumiau/tbpJT/2/ – kumiau 2012-03-11 19:53:50

謝謝。但是，我從字面上感覺到想要改變頁面（在引擎蓋下）來增加無數的跨度或者什麼不是。儘管如此，我並不擅長jQuery，但我從這個功能性的例子中學到了一些東西。 – 2012-03-12 01:02:40

很高興能幫到你！ – Sindre 2012-03-12 17:50:47

我要繼續前進，並說，這是不可能的。

Javascript與DOM樹交互，您可以與元素進行交互，但不能與文本本身交互。我認爲這是遠程可能的唯一方法（除了淹沒在span代碼中的html代碼之外）是動態執行它：讀取文本節點並分割跨度中的單詞。

來源

2012-03-11 19:21:41 kumiau

但是我們不要忘記：所有的瀏覽器都可以在雙擊時完美地完成這個任務，所以他們絕對有能力。瀏覽器本身我確定是實際處理突出顯示文本的內容，而不是操作系統（在這種情況下，事情會變得更加模糊）。所以他們顯然有一個命令來做到這一點，根據鼠標指針的位置。不過，我瞭解情緒。我看了看，看起來... – 2012-03-12 01:06:29

瀏覽器是一個應用程序，你可以用本地應用程序做很多事情，你不能用javascript做。我已經嘗試了其他應用程序中的doble點擊，並且以相同的方式工作，所以我認爲更多的是操作系統而不是瀏覽器本身。 – kumiau 2012-03-12 03:18:00

與@Sindre相同的概念，當鼠標懸停在< p>上時，將文本拆分爲單詞並用於渲染它們。點擊這些< span>，點亮它們。

在我的jsfiddle下面，單擊一個單詞，所有相同的單詞都會突出顯示。你可以改變比較設置選擇，例如。與索引比較，而不是單詞本身，以單獨突出單個詞。

此外，我沒有使用鼠標懸停，而是點擊。所以你應該點擊< p>選擇（激活，使顏色變成紅色），然後選擇一個單詞。 jsfiddle here

// main code 
    <div 
    @click='select' 
    :class='cls'> 
    <p v-if='!split'> {{data}} </p> 
    <p v-else> 
     <span 
     v-for='word in spdata' 
     :class='chosen(word)' 
     @click='choose'> 
     {{word}} 
     </span> 
    </p> 
    </div> 
// -------------------- 
    methods: { 
    select (e) { 
     this.split = true 
    }, 
    choose (e) { 
     let el = e.srcElement 
     this.chosenWord = el.innerText 
     console.log(this.chosenWord) 
    }, 
    chosen (word) { 
     if (word.trim() === this.chosenWord.trim()) { 
     return ['chosen'] 
     } else { 
     return [] 
     } 
    } 
    }, 
    computed: { 
    spdata() { 
     return this.data.split(' ') 
    } 
    }

來源

2017-06-18 14:57:15 Plasmatium

在單擊時突出顯示文本（javascript jquery html）

回答

相關問題