Internet Explorer contenteditable image click event only triggered every second time

StackOverflow https://stackoverflow.com/questions/22338745

题

I first ran into this while working on a Windows Store app using JavaScript, but the it's reproducible in IE too.

Below is a very simplified version of my actual implementation. The alert is shown when clicking anywhere except on the image. But when clicking on the image, the event is only triggered every second time. I get the resize adorners on the first click, but the event doesn't seem to get to triggered correctly.

Does anyone know why and how this can be prevented? I would like to know that the image is selected the first time it has been clicked.

<html>
    <body>
        <div id="outerEditor">
            <div id="innerEditor" contenteditable="true">
                <img src="test.png" />
            </div>
        </div>

        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#outerEditor").click( function(){
                    alert("click");
                });
            });
        </script>
    </body>
</html>

Added a JSFiddle to show the issue: http://jsfiddle.net/72aH8/3/

有帮助吗？

解决方案

You should change the click event from CLICK to MOUSEDOWN.

Updated Jsfiddle

<html>
<body>
    <div id="outerEditor">
        <div id="innerEditor" contenteditable="true">
            <img src="test.png" />
        </div>
    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#outerEditor").mousedown( function(){
                alert("click");
            });
        });
    </script>
</body>

其他提示

Your error must be somewhere else, it works with img styled like this: 

img {
    width: 100px;
    height: 100px;
    background: red;
}

Working fiddle: http://jsfiddle.net/Kg4Vg/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top