Can't type/click into a text area anymore due to jQuery but can't see what's causing it

Question

I'm learning jQuery at the moment via a Front End Web Development online course. I have a text area on my webpage but since using jQuery I can't type or click into the text area. I know the problem is the jQuery code as when I deleted the link to JavaScript in HTML the text area works fine. I don't know what specifically is causing the problem within jQuery. I'll put the code below.

$(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

You have an event set to happen on a mousedown over the whole document, and inside that event handler function you have a call to preventDefault() which prevents other events from firing. Since <textarea> is inside document, the mousedown event for the document is fired instead of the textarea event. Check this fiddle for more information:

$(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>

Note that if you comment event.preventDefault() on $(document).on('mousedown'...) the textarea event starts working.