直接在元素上单击事件

Question

我在Safari的点击事件上遇到了麻烦。当我click在跨度上时，第一次没有任何反应。但是，当我专注于跨度时，单击事件就会起作用。有人可以解释这个奇怪的事件吗？或任何建议？ 这是我的JavaScript：

window.selectText = function() {
    $('.banks .number').on('click', function(e) {
        $(this).select();

        var doc = document,
            text = this,
            range,
            selection;

        if (doc.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();
            range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }    
    });
}

和html片段：

<div class="banks">
    <div class="bank-title">Хүлээн авагчийн данс</div>
    <div class="bank khaan">
        <div class="spacer" id="test">
            <div class="logo"></div>
            <span class="number">5037639120</span>
            <span class="name">Хаан банк</span>
        </div>
    </div>
    <div class="bank khas">
        <div class="spacer">
            <div class="logo"></div>
            <span class="number">5002086050</span>
            <span class="name">Хас банк</span>
        </div>
    </div>
</div>

我的目标是当用户单击span.number时必须选择文本。但是我不明白为什么单击事件在第一次单击时不起作用，并且在将其选定的范围集中之后，其他单击事件才起作用。

Answer 1

  $(document).ready(function () {
          
            jQuery(".banks").click(function () {
               
                jQuery(".number").click(function (e) {
                    var se = window.getSelection();
                    alert(se);
                    //your logic can apply here
                    exit();
                });
                
            });
           
           
        });