3

I am trying to create a script that detects when a person is done highlighting text. To do so, I've got an onclick event in the div containing the p with the text in it. If you click anywhere in the yellow space, the alert box should come up on the click event. If you highlight a portion of the text (but not all the way to the end of the text!) the event will fire.

The bug occurs when you highlight up to and including the last word "text". The event will not fire.

I can duplicate this in Chrome and Safari but it seems to work OK in Firefox. Haven't tested IE.

<html>
    <head>
        <style>
            div{background-color:#FFFF00}
        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>

            function mouseClicked()
            {
                alert("mouseClicked");
            }
        </script>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>



    </div>
        <div onClick='mouseClicked()'>
            <p>Try to highlight this text</p>
        </div>
    </body>


</html>

Any ideas? Thanks, Kshanti

Edit: Just figured out it works with onmouseup event used like this: document.onmouseup=mouseClicked;

From Javascript: How to detect if a word is highlighted

Still weird that it doesn't work with onclick though.

Community
  • 1
  • 1
galactikuh
  • 765
  • 8
  • 18
  • 3
    If you release your mouse outside of the element, you did not click on the element. Seems to me it's working as intended. – James Montagne Jun 05 '13 at 23:48
  • See my comment in Dancrumb's answer... I put the background color in to make sure I wasn't going outside of the element. – galactikuh Jun 06 '13 at 15:10

2 Answers2

2

I have wrote some code to illustrate this problem. What I have found is that in FireFox the problem is partially solved but not in Chrome. The code is at: http://jsfiddle.net/3NUfv/3/

<div id = "div1">
<p id = "text">
    Try to highlight this texT
</p>
<br>
</div>
<p id = "downForDiv"></p>
<p id = "downForP"></p>
<p id = "upForDiv"></p>
<p id = "upForP"></p>
<p id = "clickForDiv"></p>
<p id = "clickForP"></p> 
<button id = "clear">clear</button>

Once you try to highlight some text, the description about where your mouse down and up will display on the screen.

I have opened the jsfiddle code both in FireFox and Chrome. The bad condition in FireFox is that when you highlight some text and move the mouse from the yellow to green region, mousedown and mouseup will be detected but not the click.

If you simply highlight some text in the yellow region in FireFox, the click can be detected.

I think this may be related to the design of browser.

Community
  • 1
  • 1
Long Ma
  • 56
  • 4
0

A click event fires when the browser detects a mousedown event followed by a mouseup event firing on the same element.

Odds are, your moving your mouse outside the element that the mousedown fires on when you release the mouse. Since you don't have the down-up pair on the same element, you don't get your click.

Dancrumb
  • 26,597
  • 10
  • 74
  • 130