skip to Main Content

I have tried many times, and looked up a lot, but it still doesn’t work. So I hope everyone can enlighten me.

I have:

$.fn.logicTuoi_tinhTuoi = (e) => {
    $('#tuoi').html($.fn.tinhTuoi())
    if (!~$('#tuoi').text().indexOf('Lỗi')){
        $.fn.fireWorks(e)
        $('#tuoi').effect('fade')
    }else $('#tuoi').effect('shake')
}
$('#divTinhTuoi').on('click', '#tinhtuoi', (e) => {
    $.fn.logicTuoi_tinhTuoi(e)
})
$(document).on('keypress', '#divTinhTuoi', (e) => {
    if (e.which == 13){
        $.fn.logicTuoi_tinhTuoi(e)
    }
})

The problem is that I cannot get the event from the #tinhtuoi click event when I press the Enter key. So I can’t pass e from the onClick #tinhtuoi event to the $.fn.logicTuoi_tinhTuoi(e) function.

Image i Want

Link image if you cannot viewed: https://ibb.co/vcqjsPC

I really want to be able to get the Event from clicking this button from pressing the Enter key. But I don’t know how or is there any better way to do this please suggest me. Will be appreciated. Thank you very much.
The click event is a button.

enter image description here
Link if you cannot viewd image: https://ibb.co/DM3HdXK
I want I can get the ‘e’ from the click event and pass it to the keypress event. But I don’t know what to do?

I am using cdn anime.js 3.2.2, Jquery 3.7.1, Jquery ui 1.13.

2

Answers


  1. You should refactor your fireworks function to accept the position and not the event. Nonetheless theres no mouse position on keypress so you have to get it beforehand on mousemove and then pass it on keypress.

    
    // Store pointer position on mousemove
    const mousePositon = {x: 0, y: 0};
    $(window).on("mousemove", (e) => {
      Object.assign(mousePosition, {x: e.clientX, y: e.clientY});
    });
    
    $.fn.logicTuoi_tinhTuoi = (position) => {
        $('#tuoi').html($.fn.tinhTuoi())
        if (!~$('#tuoi').text().indexOf('Lỗi')){
            $.fn.fireWorks(position)
            $('#tuoi').effect('fade')
        }else $('#tuoi').effect('shake')
    };
    
    $('#divTinhTuoi').on('click', '#tinhtuoi', (e) => {
        // OnClick pass click event mouse position
        $.fn.logicTuoi_tinhTuoi({x: e.clientX, y: e.clientY})
    })
    $(document).on('keypress', '#divTinhTuoi', (e) => {
        if (e.which == 13){
            // Pass last mouse position
            $.fn.logicTuoi_tinhTuoi(mousePosition)
        }
    })
    
    
    Login or Signup to reply.
  2. Just call the button’s click event with no parameter; $(‘#divTinhTuoi’).click()

    Javascript will provide the button’s event object to the event handler

    The result will be that when you press the Enter key, it will be as if the button was clicked.

    $.fn.logicTuoi_tinhTuoi = (e) => {
        $('#tuoi').html($.fn.tinhTuoi())
        if (!~$('#tuoi').text().indexOf('Lỗi')){
            $.fn.fireWorks(e)
            $('#tuoi').effect('fade')
        }else $('#tuoi').effect('shake')
    }
    $('#divTinhTuoi').on('click', '#tinhtuoi', (e) => {
        $.fn.logicTuoi_tinhTuoi(e)
    })
    $(document).on('keypress', '#divTinhTuoi', (e) => {
        if (e.which == 13){
            // Javascript will provide the button's event object to the event handler
            $('#divTinhTuoi').click()
        }
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search