JavaScript Click Event is not Working Inside contentEditable Elements.

JavaScript click event is not working inside contentEditable elements which is I set in a <div> html page. And I loaded this page in WKWebView. This problem is solely in WKWebView. The problem is when contentEditable get focused for text editing then click event is not working anymore. It suppose to do. If you check this in safari, it is working. But It is not working when I load the same page in WKWebView. Website URL is: http://juntolife.com/for_testing/web-page-for-clickevent.html


<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title>Title</title>
    </head>
    <body style="background-color:#bce0ff;">
        <div>
            <h3 style="text-align: center;"><strong>Local Web Page For Click Event Test</strong></h3>
           
            <p>Link outside content editable: <a href="#"> This is a dummy link</a> Please click it to see it is working or not.</p>
        </div>
       
        <div contenteditable="true" id="content" style="background-color:#ffffff;">
            <p>Link inside content editable: <a href="#"> This is a dummy link</a> Please click it to see it is working or not.</p>
        </div>
        <script>
            document.querySelector("body").addEventListener('click', function(e) {
              var anchor = e.target.closest('a');
              if(anchor !== null) {
                anchor.innerHTML = Date();
              }
            }, false);
        </script>
    </body>
</html>

Any help will be appreciated.

Thanks

Muhammad Riaz

JavaScript Click Event is not Working Inside contentEditable Elements.
 
 
Q