Javascript Minimalism

FF 에서, 이미지를 누르고 드래그하면 이동한다. 이는 이미지를 쉽게 사용자 컴퓨터로 저장할 수 있도록 FF 에서 제공하는 기능이지만, 멀티브라우저상에서 드래그 앤 드롭 기능을 구현하려면 이 기본제공기능을 꺼야한다.

IE 에서도 이미지 드래그기능을 자체 제공하진 않지만, FF 와는 다른 여러 기능들을 제공한다. 즉, mousedown, mousemove, click 등 이벤트의 종류별로, 또 브라우저별로 지원되는 기능들이 가지각색이다.

UI 를 개발하는 사람의 입장에서는 이 모든 특별기능들이 꺼진 가장 기본의 상태에서 작업하는게 가장 이상적이다. 다음 함수로 가능하다. 특별기능을 끈다는 의미에서  turnoff_fx_event_func 라는 이름을 지었다.

// event 발생시 브라우저별로 자체 제공하는 특별기능 끄기.
var turnoff_fx_event_func = function (event) {
    event = event || window.event;

    if (event.preventDefault) {
        event.preventDefault();   // firefox/모질라에서 event 발생시 자체 제공하는 특별기능 끄기.
    } else {
        event.returnValue  = false; // IE에서 event 발생시 자체 제공하는 특별기능 끄기.
    }
};

다음과 같이 사용가능하다. mousedown 이벤트시를 예로 들겠다.

element.onmousedown = function (event) {
    turnoff_fx_event_func(event);

    // ... your codes
    // ....
};