Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #20050 > unrolled thread

onmouseup IE9

Back to article view | Back to comp.lang.javascript

Contents

  onmouseup IE9 Andrew Poulos <ap_prog@hotmail.com> - 2013-05-30 12:54 +1000
    Re: onmouseup IE9 Andrew Poulos <ap_prog@hotmail.com> - 2013-05-30 13:10 +1000
      Re: onmouseup IE9 Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-05-30 12:12 +0200
        Re: onmouseup IE9 Andrew Poulos <ap_prog@hotmail.com> - 2013-05-31 08:28 +1000
          Re: onmouseup IE9 Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-05-31 15:12 +0200
            Re: onmouseup IE9 Andrew Poulos <ap_prog@hotmail.com> - 2013-06-01 18:36 +1000
              Re: onmouseup IE9 Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-06-01 11:55 +0200

#20050 — onmouseup IE9

With the test page:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style = type="text/css">
body {
   font-family:Verdana, Geneva, sans-serif;
   font-size:0.8em;
}
</style>
<script type="text/javascript">
function down() {
   document.getElementById("me").innerHTML += "--- Down ";	
}
function up() {
   document.getElementById("me").innerHTML += "Up --- ";		
}
document.onmousedown = down;
document.onmouseup = up;
</script>
</head>
<body>
   <p id="me" style="text-align:center;">Starts here:<br></p>
</body>
</html>

onmouseup will fail to trigger in IE 9 by dragging the pointer to an new 
location and waiting a second or two before releasing the left mouse 
button. I couldn't get IE 7 or 8 (or any other browser) to fail in this 
manner. How can I get IE 9 to behave?

Andrew Poulos

[toc] | [next] | [standalone]

#20051

On 30/05/2013 12:54 PM, Andrew Poulos wrote:
> With the test page:
>
> <!DOCTYPE html>
> <html>
> <head>
> <meta charset="UTF-8">
> <title>Test</title>
> <style = type="text/css">
> body {
>    font-family:Verdana, Geneva, sans-serif;
>    font-size:0.8em;
> }
> </style>
> <script type="text/javascript">
> function down() {
>    document.getElementById("me").innerHTML += "--- Down ";
> }
> function up() {
>    document.getElementById("me").innerHTML += "Up --- ";
> }
> document.onmousedown = down;
> document.onmouseup = up;
> </script>
> </head>
> <body>
>    <p id="me" style="text-align:center;">Starts here:<br></p>
> </body>
> </html>
>
> onmouseup will fail to trigger in IE 9 by dragging the pointer to an new
> location and waiting a second or two before releasing the left mouse
> button. I couldn't get IE 7 or 8 (or any other browser) to fail in this
> manner. How can I get IE 9 to behave?

Here's a bit more info. It works when the pointer stays as an arrow but 
fails when (for some reason) the pointer changes to a circle with a 
diagonal line through it.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#20055

Andrew Poulos wrote:

> On 30/05/2013 12:54 PM, Andrew Poulos wrote:
>> With the test page:
>>
>> <!DOCTYPE html>
>> <html>
>> <head>
>> <meta charset="UTF-8">
>> <title>Test</title>
>> <style = type="text/css">
>> body {
>>    font-family:Verdana, Geneva, sans-serif;
>>    font-size:0.8em;
>> }
>> </style>
>> <script type="text/javascript">
>> function down() {
>>    document.getElementById("me").innerHTML += "--- Down ";
>> }
>> function up() {
>>    document.getElementById("me").innerHTML += "Up --- ";
>> }
>> document.onmousedown = down;
>> document.onmouseup = up;
>> </script>
>> </head>
>> <body>
>>    <p id="me" style="text-align:center;">Starts here:<br></p>
>> </body>
>> </html>
>>
>> onmouseup will fail to trigger in IE 9 by dragging the pointer to an new
>> location and waiting a second or two before releasing the left mouse
>> button. I couldn't get IE 7 or 8 (or any other browser) to fail in this
>> manner. How can I get IE 9 to behave?
> 
> Here's a bit more info. It works when the pointer stays as an arrow but
> fails when (for some reason) the pointer changes to a circle with a
> diagonal line through it.

That cursor shape indicates that the element is not a proper drag-and-drop 
target.  You are using HTML5 which is (partially) supported from IE/MSHTML 9 
on.  There are specific events for drag-and-drop, and they have been 
standardized with HTML5; use your current approach only as a fallback.

-- 
PointedEars

[toc] | [prev] | [next] | [standalone]

#20058

On 30/05/2013 8:12 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 30/05/2013 12:54 PM, Andrew Poulos wrote:
>>> With the test page:
>>>
>>> <!DOCTYPE html>
>>> <html>
>>> <head>
>>> <meta charset="UTF-8">
>>> <title>Test</title>
>>> <style = type="text/css">
>>> body {
>>>     font-family:Verdana, Geneva, sans-serif;
>>>     font-size:0.8em;
>>> }
>>> </style>
>>> <script type="text/javascript">
>>> function down() {
>>>     document.getElementById("me").innerHTML += "--- Down ";
>>> }
>>> function up() {
>>>     document.getElementById("me").innerHTML += "Up --- ";
>>> }
>>> document.onmousedown = down;
>>> document.onmouseup = up;
>>> </script>
>>> </head>
>>> <body>
>>>     <p id="me" style="text-align:center;">Starts here:<br></p>
>>> </body>
>>> </html>
>>>
>>> onmouseup will fail to trigger in IE 9 by dragging the pointer to an new
>>> location and waiting a second or two before releasing the left mouse
>>> button. I couldn't get IE 7 or 8 (or any other browser) to fail in this
>>> manner. How can I get IE 9 to behave?
>>
>> Here's a bit more info. It works when the pointer stays as an arrow but
>> fails when (for some reason) the pointer changes to a circle with a
>> diagonal line through it.
>
> That cursor shape indicates that the element is not a proper drag-and-drop
> target.  You are using HTML5 which is (partially) supported from IE/MSHTML 9
> on.  There are specific events for drag-and-drop, and they have been
> standardized with HTML5; use your current approach only as a fallback.

I found a previous post by you on the matter (via Google) about using 
ondragend. Unfortunately I didn't find IE9 behaving any better. That is, 
the onmousedown would always trigger and the onmouseup and ondragend 
would not always trigger.

Well-referenced sites like
<http://www.thecssninja.com/demo/gmail_dragout/>
fail in IE9 with "show errors" on :-(

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#20064

Andrew Poulos wrote:

> On 30/05/2013 8:12 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> On 30/05/2013 12:54 PM, Andrew Poulos wrote:
>>>> <!DOCTYPE html>
>>>> <html>
>>>> <head>
>>>> […]
>>>> <script type="text/javascript">
>>>> function down() {
>>>>     document.getElementById("me").innerHTML += "--- Down ";
>>>> }
>>>> function up() {
>>>>     document.getElementById("me").innerHTML += "Up --- ";
>>>> }
>>>> document.onmousedown = down;
>>>> document.onmouseup = up;
>>>> </script>
>>>> </head>
>>>> <body>
>>>>     <p id="me" style="text-align:center;">Starts here:<br></p>
>>>> </body>
>>>> </html>
>>>>
>>>> onmouseup will fail to trigger in IE 9 by dragging the pointer to an
>>>> new location and waiting a second or two before releasing the left
>>>> mouse button. I couldn't get IE 7 or 8 (or any other browser) to fail
>>>> in this manner. How can I get IE 9 to behave?
>>> Here's a bit more info. It works when the pointer stays as an arrow but
>>> fails when (for some reason) the pointer changes to a circle with a
>>> diagonal line through it.
>> That cursor shape indicates that the element is not a proper
>> drag-and-drop target.  You are using HTML5 which is (partially) supported
>> from IE/MSHTML 9 on.  There are specific events for drag-and-drop, and
>> they have been standardized with HTML5; use your current approach only as
>> a fallback.
> 
> […] Unfortunately I didn't find IE9 behaving any better [with ondragend].
> That is, the onmousedown would always trigger and the onmouseup and
> ondragend would not always trigger.
> 
> Well-referenced sites like
> <http://www.thecssninja.com/demo/gmail_dragout/>
> fail in IE9 with "show errors" on :-(

“"show errors" on”?  And the referenced site uses HTML5-specific techniques 
that need not to work in IE 9.

Please post the public URI and a more detailed explanation of a reduced test 
case that demonstrates *your* problem.

And *please* trim your quotes.

-- 
PointedEars

[toc] | [prev] | [next] | [standalone]

#20099

On 31/05/2013 11:12 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 30/05/2013 8:12 PM, Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> On 30/05/2013 12:54 PM, Andrew Poulos wrote:
>>>>> <!DOCTYPE html>
>>>>> <html>
>>>>> <head>
>>>>> […]
>>>>> <script type="text/javascript">
>>>>> function down() {
>>>>>      document.getElementById("me").innerHTML += "--- Down ";
>>>>> }
>>>>> function up() {
>>>>>      document.getElementById("me").innerHTML += "Up --- ";
>>>>> }
>>>>> document.onmousedown = down;
>>>>> document.onmouseup = up;
>>>>> </script>
>>>>> </head>
>>>>> <body>
>>>>>      <p id="me" style="text-align:center;">Starts here:<br></p>
>>>>> </body>
>>>>> </html>
>>>>>
>>>>> onmouseup will fail to trigger in IE 9 by dragging the pointer to an
>>>>> new location and waiting a second or two before releasing the left
>>>>> mouse button. I couldn't get IE 7 or 8 (or any other browser) to fail
>>>>> in this manner. How can I get IE 9 to behave?
>>>> Here's a bit more info. It works when the pointer stays as an arrow but
>>>> fails when (for some reason) the pointer changes to a circle with a
>>>> diagonal line through it.
>>> That cursor shape indicates that the element is not a proper
>>> drag-and-drop target.  You are using HTML5 which is (partially) supported
>>> from IE/MSHTML 9 on.  There are specific events for drag-and-drop, and
>>> they have been standardized with HTML5; use your current approach only as
>>> a fallback.
>>
>> […] Unfortunately I didn't find IE9 behaving any better [with ondragend].
>> That is, the onmousedown would always trigger and the onmouseup and
>> ondragend would not always trigger.
>>
>> Well-referenced sites like
>> <http://www.thecssninja.com/demo/gmail_dragout/>
>> fail in IE9 with "show errors" on :-(
>
> “"show errors" on”?  And the referenced site uses HTML5-specific techniques

Tools > Internet Options > Advanced > Display a notification about every 
script error

> that need not to work in IE 9.

Hmm, the page has a HTML4 type doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

> Please post the public URI and a more detailed explanation of a reduced test

The full HTML that I'm testing is posted above. Click, drag, release 
tens of times and the problem will eventually occur.

> case that demonstrates *your* problem.

I'm finding it works a bit better (its harder to make it fail) if I 
instead of document.onmouseup I use document.documentElement.onmouseup .

Thanks for your help but I'm starting to think its an IE issue.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#20100

Andrew Poulos wrote:

> On 31/05/2013 11:12 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> On 30/05/2013 8:12 PM, Thomas 'PointedEars' Lahn wrote:
>>>> Andrew Poulos wrote:
>>>>> On 30/05/2013 12:54 PM, Andrew Poulos wrote:
>>>>>> <!DOCTYPE html>
>>>>>> <html>
>>>>>> <head>
>>>>>> […]
>>>>>> <script type="text/javascript">
>>>>>> function down() {
>>>>>>      document.getElementById("me").innerHTML += "--- Down ";
>>>>>> }
>>>>>> function up() {
>>>>>>      document.getElementById("me").innerHTML += "Up --- ";
>>>>>> }
>>>>>> document.onmousedown = down;
>>>>>> document.onmouseup = up;
>>>>>> </script>
>>>>>> </head>
>>>>>> <body>
>>>>>>      <p id="me" style="text-align:center;">Starts here:<br></p>
>>>>>> </body>
>>>>>> </html>
>>>>>>
>>>>>> onmouseup will fail to trigger in IE 9 by dragging the pointer to an
>>>>>> new location and waiting a second or two before releasing the left
>>>>>> mouse button. I couldn't get IE 7 or 8 (or any other browser) to fail
>>>>>> in this manner. How can I get IE 9 to behave?
>>>>> […] It works when the pointer stays as an arrow but fails when (for
>>>>> some reason) the pointer changes to a circle with a diagonal line
>>>>> through it.
>>>> That cursor shape indicates that the element is not a proper
>>>> drag-and-drop target.  You are using HTML5 which is (partially)
>>>> supported from IE/MSHTML 9 on.  There are specific events for drag-and-
>>>> drop, andthey have been standardized with HTML5; use your current
>>>> approach only as a fallback.
>>> […] Unfortunately I didn't find IE9 behaving any better [with
>>> [ondragend]. That is, the onmousedown would always trigger and the
>>> onmouseup and ondragend would not always trigger.
>>>
>>> Well-referenced sites like
>>> <http://www.thecssninja.com/demo/gmail_dragout/>
>>> fail in IE9 with "show errors" on :-(
>>
>> “"show errors" on”?  And the referenced site uses HTML5-specific
>> techniques
> 
> Tools > Internet Options > Advanced > Display a notification about every
> script error

So, what script errors are you getting and when *exactly* do they occur 
there?
 
>> that need not to work in IE 9.
> 
> Hmm, the page has a HTML4 type doctype
> 
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">

While it is possible that the wrong doctype/DOCTYPE declaration may have an 
effect, this test case is designed around dragging elements out of the 
browser, to the desktop, and uses advanced features that are not required 
for drag-and-drop.  Drag-and-drop example code and test cass for IE 9 would 
be found in the MSDN Library:

<http://msdn.microsoft.com/en-us/library/ff974339(v=vs.85).aspx>

>> Please post the public URI and a more detailed explanation of a reduced
>> test
> 
> The full HTML that I'm testing is posted above. Click, drag, release
> tens of times and the problem will eventually occur.

The HTML code above does not show how you are using “ondragend”.  Also, you 
should not be modifying the document in this way in your tests to avoid side 
effects.  Use console.log(); IE 9 supports it with the error console (F12) 
displayed.

>> case that demonstrates *your* problem.
> 
> I'm finding it works a bit better (its harder to make it fail) if I
> instead of document.onmouseup I use document.documentElement.onmouseup .

Probably a good idea, although the question remains why you would not 
primarily use W3C DOM Level 3 Events.  IE 9 in Standards Mode suports it.  
Make sure that you are not viewing in Compatibility Mode (button next to the 
Address Bar input).
 
> Thanks for your help but I'm starting to think its an IE issue.

I think that once again you have not thought this through.  For if drag-and-
drop problems in IE 9 were as common as your posting suggests, it would be 
common knowledge by now (according to Net Applications¹, on desktops IE 9 
has had a top market share of 21.67% in February 2013 [W3Counter²: 13.1% in 
November 2012] and still has a market share of 15.39% [W3Counter: 7.37%]; 
both count unique visitors per site, by contrast to e.g. StatCounter³ which 
counts pageviews).

Please *read* and *take heed of*
<http://www.catb.org/~esr/faqs/smart-questions.html>

_______
¹ <http://www.netmarketshare.com/>
² <http://www.w3counter.com/> (not affiliated with the W3C)
³ <http://gs.statcounter.com/>
-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web