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