javascript - ie9 & Firefox はマウスダウン入力にフォーカス

Question

ドラッグ可能な要素を使用して、ユーザーの仕様に合わせてアプリケーションを配置する Web ページがあります。ユーザーは、ボックスをドラッグ (onmousedown) して、他のボックスとインラインでドロップできます。

これらのボックス内には、input、textarea、radio、checkbox タイプの入力があります。

IE9、Firefox 17.0.1、および Firefox 14.0.1 の問題 (私がテストしたバージョンのみ)

問題は、入力ボックスまたはテキストエリア ボックスをクリックすると、onmousedown イベントが発生してフォーカスが奪われることです。マウスを離すと、フォーカスが入力ボックスに戻ることはありません。ラジオとチェックボックスは問題なく機能します。

複数の入力と複数の要素があります。

誰にもアイデアはありますか？ログインが制限された環境にあるため、実際に遊ぶための開いた例はありません。

私は一日中この問題を探していましたが、どんな方向性でも素晴らしいでしょう!

function initdragableElements()
{
    dragableElementsParentBox = document.getElementById('dragableElementsParentBox');
    insertionMarkerDiv = document.getElementById('insertionMarker');
    insertionMarkerLine = document.getElementById('insertionMarkerLine');
    dragableAreaWidth = dragableElementsParentBox.offsetWidth;

    if(!useRectangle){
        dragDropMoveLayer = document.createElement('DIV');
        dragDropMoveLayer.id = 'dragDropMoveLayer';     
        document.body.appendChild(dragDropMoveLayer);   
    }

    var subDivs = dragableElementsParentBox.getElementsByTagName('*');
    var countEl = 0;
    for(var no=0;no<subDivs.length;no++){
        var attr = subDivs[no].getAttribute('dragableBox');
        if(opera)attr = subDivs[no].dragableBox;
        if(attr=='true'){
            subDivs[no].style.cursor='move';    
            subDivs[no].onmousedown = initDrag;

            var index = dragableObjectArray.length;
            dragableObjectArray[index] = new Array();
            ref = dragableObjectArray[index];
            ref['obj'] = subDivs[no];
            ref['width'] = subDivs[no].offsetWidth;
            ref['height'] = subDivs[no].offsetHeight;
            ref['left'] = getLeftPos(subDivs[no]);
            ref['top'] = getTopPos(subDivs[no]);
            ref['index'] = countEl;
            countEl++;
        }
    }

    /* Creating rectangel indicating where item will be dropped */
    rectangleDiv = document.createElement('DIV');
    rectangleDiv.id='rectangle';
    rectangleDiv.style.display='none';
    dragableElementsParentBox.appendChild(rectangleDiv);


    document.body.onmousemove = moveDragableElement;
    document.body.onmouseup = stop_dragDropElement;
    document.body.onselectstart = cancelSelectionEvent;
    document.body.ondragstart = cancelEvent;
    window.onresize = repositionDragObjectArray; 

    documentHeight = document.documentElement.clientHeight;
}

function initDrag(e)
{
    if(document.all)e = event;
    mouse_x = e.clientX;
    mouse_y = e.clientY;
    if(!documentScrollHeight)documentScrollHeight = document.documentElement.scrollHeight + 100;
    el_x = getLeftPos(this)/1;
    el_y = getTopPos(this)/1;
    dragObject = this;
    if(useRectangle){
        rectangleDiv.style.width = this.clientWidth - (rectangleBorderWidth*2) +'px';
        rectangleDiv.style.height = this.clientHeight - (rectangleBorderWidth*2) +'px';
        rectangleDiv.className = this.className;
    }else{
        insertionMarkerLine.style.width = '6px';
    }
    dragDropTimer = 0;
    dragObjectNextObj = false;
    if(this.nextSibling){
        dragObjectNextObj = this.nextSibling;
        if(!dragObjectNextObj.tagName)dragObjectNextObj = dragObjectNextObj.nextSibling;
    }
    initDragTimer();
    return false;
}