v2.5.2
Giriş yap

Javascript contextmenu event'i doğru değerleri dönmüyor.

Anonim
225 defa görüntülendi ve 3 kişi tarafından değerlendirildi
3 1

Bir hook oluşturdum burada contextmenu event'inin içinden pageX ve pageY key'inin değerlerini set etmeye çalışıyorum ama event bana doğru değerleri dönmüyor bu yüzden mouse'ın tıklandığı yerin değerlerini alamıyorum. Bana doğru değer dönmemesinin sebebi nedir?

import { useEffect, useState } from "react";

const useContextMenu = () => {
    const [x, setX] = useState<String>('0');
    const [y, setY] = useState<String>('0');
    const [showContextMenu, setShowContextMenu] = useState<Boolean>(false);

    const clickHandler = () => {
        setShowContextMenu(false);
    }

    const contextMenuHandler = (event: MouseEvent) => {
        event.preventDefault();
        setX(`${event.pageX}px`);
        setY(`${event.pageY}px`);
        setShowContextMenu(true);
    }

    useEffect(() => {
        //mount
        document.addEventListener('click', clickHandler);
        document.addEventListener('contextmenu', contextMenuHandler);
        //unmount
        return () => {
            document.removeEventListener('click', clickHandler);
            document.removeEventListener('contextmenu', contextMenuHandler);
        }
    }, []);

    return { x, y, showContextMenu };
}

export default useContextMenu;
javascript react
Cevap yaz
Cevaplar (1)
f4kor4ll
398 gün önce

contextMenuHandler fonksiyonunda event.preventDefault() çağrısının yapılması, contextmenu eventinin varsayılan davranışını engelleyecektir. Bu nedenle, pageX ve pageY değerleri doğru bir şekilde ayarlanamayacaktır. Bu davranışın özellikle mobil cihazlar için farklı olabileceğini unutmayın.

Bu sorunu çözmek için, contextMenuHandler fonksiyonunda event.preventDefault() çağrısını kaldırabilirsiniz. Ancak bu durumda, varsayılan davranış (yani sağ tık menüsü) gerçekleşecektir. Eğer bu davranışı engellemek istiyorsanız, event.stopPropagation() çağrısını kullanabilirsiniz. Bu yöntem, event'in hedefe (target) ulaşmasını engelleyecek ve varsayılan davranışı engelleyecektir.

Ayrıca, useState hook'unda x ve y değerlerinin String tipinde tanımlanması da bir soruna neden olabilir. Bunun yerine, number tipinde tanımlayabilirsiniz. Örneğin:

const [x, setX] = useState<number>(0);
const [y, setY] = useState<number>(0);
0
#012375