Ticket #9234: ie78_ceditable_mousemove_bug.html

File ie78_ceditable_mousemove_bug.html, 1.4 KB (added by Olek Nowodziński, 7 years ago)
Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.html or http://ckeditor.com/license
5-->
6<html>
7<head>
8        <title>IE7(8) contentEditable event listener bug</title>
9        <meta charset="utf-8">
10        <style>
11                .cEditable {
12                        border: 2px dashed black;
13                }
14        </style>
15</head>
16<body>
17
18        <div id="editable" style="background: orange; width: 300px; height: 300px;">
19                <p>Start selection here in the orange div, hold your mouse and and move it somewhere outside.</p>
20                <p>Under IE7(8), watch the counter going on with contentEditable=true outside of the box.</p>
21                <p>Normal browsers stop calling mousemove when pointer leaves orange div with contentEditable=true.</p>
22        </div>
23        <p id="logger">&nbsp;</p>
24
25        <script>
26                var div = document.getElementById( 'editable' ),
27                        logger = document.getElementById( 'logger' ),
28                        counter = 0;
29
30                div[ div.addEventListener ? 'addEventListener' : 'attachEvent' ](
31                                ( div.addEventListener ? '' : 'on' ) + 'mousemove', function() {
32
33                        logger.innerHTML = '"mousemove" fired: ' + ++counter + ' times.';
34                });
35
36                function toggleEditable() {
37                        var isEditable = div.getAttribute( 'contentEditable' ) == 'true';
38
39                        if ( isEditable )
40                                div.removeAttribute( 'contentEditable' );
41                        else
42                                div.setAttribute( 'contentEditable', 'true' );
43
44                        div.className = isEditable ? '' : 'cEditable';
45                }
46
47        </script>
48
49        <button onclick="toggleEditable()">Toggle contentEditable</button>
50
51</body>
52</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy