如何让JQuery-Button中的文本字段在进入文本字段时不触发按钮

$(document).ready(function() {
    $('#myTextField').on('focus', function(event) {
        event.stopPropagation();
    });

    $('#myButton').on('click', function() {
        alert('Button clicked!');
    });
});

$(document).ready(function() {
    $('#myTextField').on('focus', function(event) {
        event.preventDefault();
    });

    $('#myButton').on('click', function() {
        alert('Button clicked!');
    });
});

<style>
    .container {
        position: relative;
    }
    #myTextField {
        position: absolute;
        top: 0;
        left: 0;
    }
    #myButton {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

<div class="container">
    <input type="text" id="myTextField">
    <button id="myButton">Click Me</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#myButton').on('click', function() {
            alert('Button clicked!');
        });
    });
</script>