拖放后丢失鼠标悬停事件

时间：2015-09-30 22:47:04

标签： javascript

我有一个页面，它有可滚动的字符串div和一个由几个div组成的单独网格。

通常情况下，当我翻身时，鼠标悬停在琴弦上会突出显示它们。

将一个字符串从上部div组拖到其中一个网格div后，鼠标悬停突出显示不再有效，直到我再次单击鼠标（无关紧要）。在鼠标悬停时，同一页面上单独div中的按钮不会突出显示。

我可以点击任何div（包括放置目标）来重新启动鼠标悬停，所以只需点击一下就可以重新启用鼠标悬停事件。

这只发生在跌落之后。我尝试生成一个单击并将ev.target设置为0 ondragend（我通常不听），但仍然没有骰子（也尝试了焦点，但我不认为这是问题）。

如果鼠标悬停事件在丢弃后没有触发或者其他元素不可见，如何在不手动点击鼠标的情况下将其恢复？

the problem area 

///////////////////////////////// D&D /////////////////////////////////////////
function hdragstart(e) {
   e.dataTransfer.setData("text", e.target.id);
   e.dataTransfer.setDragImage(e.target.innerHTML);
   return true;

}

function hdragenter(e) {
   e.preventDefault();
   return true;
}

function hdragover(e) {
 e.preventDefault(); 
}


function hdrop(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData("text");
  e.target.innerHTML=(document.getElementById(data).innerHTML);
  e.target.title=(document.getElementById(data).innerHTML);
  e.stopPropagation();
  return false;
}


//load saved streams into strcont div
////////////////////////////////////////////////////////////////////////////////
function loadsched()
{
    var fs=require('fs');
    var root,r,istr;
    var arr=[],len,buf,i,elt=[],elc=[],tn=[];

    buf  = fs.readFileSync(DS.DBFNAME,'utf8');
    arr  = buf.split('\n');
    len  = arr.length;
    root = document.getElementById('strcont');

    for(i=0; i<len; i++){
        if((arr[i].search('des'))>-1){

            istr=i.toString();
            r   = dbgettag('des',arr[i]);

            elt[i] = document.createElement('div');
            elt[i].setAttribute('class','schedtxt');
            elt[i].setAttribute('id','sc'+istr);
            elt[i].setAttribute('draggable','true');

            tn[i]  = document.createTextNode(r);

            elt[i].appendChild(tn[i]);
            root.appendChild(elt[i]);   

            elc[i] = document.createElement('div');
            elc[i].setAttribute('class','clear');
            root.appendChild(elc[i]);   


        }
    }
}


///////////////////////////////// HTML /////////////////////////////////////////
  <div class='strcont' id='strcont'></div>  

  <div  class="grid" id="grid">
    <div class="cell0"  id="sel"  draggable="true" ondragstart="gdrag(event,this.value)"  onfocus="this.blur()" value="" title="Drag this to a time-slot" ></div>
    <div class="cell0"  disabled="disabled"   value="12" >12</div>
    <div class="cell0"  disabled="disabled"   value="1"  >1</div>
    <div class="cell0"  disabled="disabled"   value="2"  >2</div>
    <div class="cell0"  disabled="disabled"   value="3"  >3</div>
    <div class="cell0"  disabled="disabled"   value="4"  >4</div>
    <div class="cell0"  disabled="disabled"   value="5"  >5</div>
    <div class="cell0"  disabled="disabled"   value="6"  >6</div>
    <div class="cell0"  disabled="disabled"   value="7"  >7</div>
    <div class="cell0"  disabled="disabled"   value="8"  >8</div>
    <div class="cell0"  disabled="disabled"   value="9"  >9</div>
    <div class="cell0"  disabled="disabled"   value="10" >10</div>
    <div class="cell0"  disabled="disabled"   value="11" >11</div>
    <div class="clear"></div>
    <div class="cell0"  disabled="disabled"   value="AM" >AM</div>
    <div class="cell"  id="0"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)"></div>
    <div class="cell"  id="1"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)"></div>
    <div class="cell"  id="2"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="3"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="4"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="5"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="6"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="7"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="8"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="9"   ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="10"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="11"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="clear"></div>
    <div class="cell0"  disabled="disabled"   value="PM" >PM</div>
    <div class="cell"  id="12"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="13"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="14"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="15"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="16"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="17"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="18"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="19"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="20"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="21"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="22"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
    <div class="cell"  id="23"  ondrop="return hdrop(event)" ondragover="return hdragover(event)"  ondragenter="return hdragenter(event)" ></div>
  </div>
  <div class="clear"></div>
</div>

编辑：

我做了一些进一步的测试，只是为了尝试更好地了解发生了什么。 我正在调用此函数：

<div class='strcont' id='strcont' onmouseover='return logMouseMove(event)'></div>  


function logMouseMove(e)
{
    var evt=e.type
    console.log(evt+" target="+(e.target||e.srcElement).id,'move')
    return false
}

它显示鼠标悬停事件在删除后触发了字符串，但突出显示仍然无法工作，直到我点击鼠标，所以我仍然不知道这是什么，我会看看我是否可以钻更深一点：

wjs version: 0.12.3
test3.html:4097 streams-mf.txt
test3.html:2823 canplay
test3.html:2827 play

////// initial mouseover on strings
test3.html:4124 mouseover target=strcont move
test3.html:4124 mouseover target=sc7 move
test3.html:4124 mouseover target=sc6 move

///// dragover on cell-4 div
test3.html:4124 mouseover target=4 move

///// drop on cell-3 div
test3.html:4124 mouseover target=3 move

///// dragend - mouseover back to strings div
test3.html:4124 mouseover target= move
test3.html:4124 mouseover target=strbut move

///// mouseover events fired on strings divs
///// but no highlighte until clicked
test3.html:4124 mouseover target=sc7 move
test3.html:4124 mouseover target=sc6 move
test3.html:4124 mouseover target=sc5 move
test3.html:4124 mouseover target=sc4 move
test3.html:4124 mouseover target=sc3 move
test3.html:4124 mouseover target=sc2 move
test3.html:4124 mouseover target=sc1 move

只是一个想法：我做过的测试显示鼠标悬停后没有发生事故，没有我点击后面的鼠标，所以如果我要在js中听取事件，我可以做文本突出显示它会工作，所以有一个解决方法。

但是，我更改了css选择器中的文本颜色（schedtxt类是动态创建的，在strcont div内滚动的div），为什么我需要在删除后点击鼠标才能获得浏览器（Chromium / V8）在我的情况下）处理css规则？

.strcont{
    width:      96%;
    height:     115px;
    overflow-x: hidden;
    overflow-y: auto;
    cursor:     default;
}

.schedtxt{
    width:      100%;
    border: 1px solid transparent;
    font-family:arial, sans-serif;
    font-size:  11px;
    font-weight:600;
    color:      #aaaaaa;
    padding:0px 0px 0px 5px;
    overflow:   hidden;
    white-space:nowrap;
    cursor:     default;
}

.schedtxt:hover{
    color:#ececec;
}

编辑：

修改上面的测试函数可以正常工作并修复问题，但是当css规则应该处理它时，我仍然需要解决这个问题。

//workaround for mouseover highlight after drop problem
/////////////////////////////////////////////////////////////
function logMouseMove(e)
{
    var evt=e.type;
    var idt=(e.target||e.srcElement).id;

    if((idt.indexOf('sc')>-1)||(idt.indexOf('playon')>-1)||(idt.indexOf('scsav')>-1))
    {
        var el=document.getElementById(idt);
        if(evt=='mouseover') el.style.color='#ededed';
        if(evt=='mouseout')  el.style.color='#aaaaaa';
    } 
    return false;
}

0 个答案:

没有答案
相关问题
最新问题