Internet Explorer contenteditable image click event only triggered every second time

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

Domanda

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/

È stato utile?

Soluzione

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>

Altri suggerimenti

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/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top