由于 jQuery，无法再在文本区域中键入/单击，但看不到导致它的原因

Question

我目前正在通过前端 Web 开发在线课程学习 jQuery。我的网页上有一个文本区域，但由于使用 jQuery，我无法在文本区域中键入或单击。我知道问题出在 jQuery 代码上，因为当我删除 HTML 中 JavaScript 的链接时，文本区域工作正常。我不知道到底是什么导致了 jQuery 中的问题。我将把代码放在下面。

$(document).ready(function(){
    var el = document.getElementById('text');

      console.log($('.submenu a').first().text());
      console.log($('.submenu a').last().text());


        $(document).on('contextmenu', function(){
          return false;
        });

        $(document).on('mousedown', function (event){
          event.preventDefault();


          if(event.which == 3){

            $('.hidden').removeClass('shown');

            if ($(event.target).is('img')){
                $('.saveimg, .newtab').addClass('shown');
            } else if ($(event.target).is('a')){
                $('.newtab').addClass('shown');
            }

            console.log(event.pageY, event.pageX);

            $('#context').css({
                top: event.pageY,
                left: event.pageX
            });

            $('#context').fadeIn();
                return false;

          }

            $('#context').fadeOut();
        })


        $('a[href="https://google.com"]').on('click', function(event){

        console.log("Linking to Google?");

        return true;
        });





    $('[data-trigger="dropdown"]').on('mouseenter', function(){
      var submenu = $(this).parent().find('.submenu');
      submenu.fadeIn(350);

      $('.profile-menu').on('mouseleave', function(){
          submenu.fadeOut(350);
      });

    });


    $('#prepend, #append, #replace').on('click', function(e){

    e.preventDefault();

        var el = $(e.currentTarget);
        var action = el.attr('id');
        var content = $('.text').val();

        if(action == "prepend"){
            console.log("Prepending...");
            $('#main').prepend(content);

        }
        else if(action == "append"){
            console.log("Appending...");
            $('#main').append(content);

        }
        else if(action == "replace"){
            console.log("Replacing...");
            $('#main').html(content);
        };

        $('.text').val('');


    });



    $('textarea').focusin(function(){
        console.log("Focused in on the textarea");
    });




});

Answer 1

您有一个事件设置为在整个文档的

mousedown

上发生，并且在该事件处理函数内您可以调用

preventDefault()

来阻止其他事件触发。由于

<textarea>

位于文档内部，因此会触发文档的

mousedown

事件而不是 textarea 事件。检查这个小提琴以获取更多信息：

$(document).ready(function () {
    var el = document.getElementById('text');

    console.log($('.submenu a').first().text());
    console.log($('.submenu a').last().text());


    $(document).on('contextmenu', function () {
        return false;
    });

    $(document).on('mousedown', function (event) {
        event.preventDefault();
        $("#events_feedback").html("Wow! I clicked on the document!");
    })


    $('a[href="https://google.com"]').on('click', function (event) {

        console.log("Linking to Google?");

        return true;
    });


    $('[data-trigger="dropdown"]').on('mouseenter', function () {
        var submenu = $(this).parent().find('.submenu');
        submenu.fadeIn(350);

        $('.profile-menu').on('mouseleave', function () {
            submenu.fadeOut(350);
        });

    });


    $('#prepend, #append, #replace').on('click', function (e) {

        e.preventDefault();

        var el = $(e.currentTarget);
        var action = el.attr('id');
        var content = $('.text').val();

        if (action == "prepend") {
            console.log("Prepending...");
            $('#main').prepend(content);

        } else if (action == "append") {
            console.log("Appending...");
            $('#main').append(content);

        } else if (action == "replace") {
            console.log("Replacing...");
            $('#main').html(content);
        }
        ;

        $('.text').val('');


    });


    $('textarea').focusin(function () {
        console.log("Focused in on the textarea");
    });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<p id="events_feedback">This is a test feedback from JS events.</p>

<textarea id="my_textarea"></textarea>

</body>
</html>

请注意，如果您在

event.preventDefault()

上评论

$(document).on('mousedown'...)

，

textarea

活动就会开始工作。