javascript - 停止传播 : bubble down?

Question

我不确定这是一个传播问题还是一个设计缺陷，我读到过传播问题都是泡沫，但它就在这里。我有一个表格编辑网格。

每个单元格包含两个主要 block :编辑 div(包含用于编辑显示值的表单)和查看 div(包含显示值)。隐藏所有溢出以使每一行具有相同的高度。

加载时不显示编辑 div，显示 View div。将鼠标悬停在单元格上时，会显示编辑 div 而不会显示 View 值。

在手机/​​平板电脑上悬停不会启动，因此需要单击单元格才能从 View 切换到编辑以及其他方式。

当编辑 View 包含可点击元素(在本例中为标签)时，问题就来了。在手机/平板电脑上，如果点击那些可点击元素将出现的坐标，这些元素将被点击。

<td  class="editGridCell" ng-if="!block && ($index > 0)" ng-repeat="attobj in columns track by $index">
  <div class="contentEdit">    
    <form name="theForm" novalidate>
      <div ng-if="true"  ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
      </div>
    </form>
  </div>

  <div ng-class="compressed ? 'contentValues' : 'contentValuesDecompressed'">
    <div  ng-repeat="v in dbo.get4(attobj.key) track by $index">
      <p ng-if="v.cid">{{ v.displayName() }}</p>
      <p ng-if="!v.cid">{{ v }}</p>
    </div> 
  </div>
</td>

模板化包含可点击标签的表单调用:

<script type="text/ng-template" id="form_field_ref">
  <div ng-init="tmp = dbo.get(attobj.name)">
    <div ng-model="tmp" ui-sortable="{ 'ui-floating': undefined}" class="clearfix">
      <div ng-repeat="dbo2 in dbo.get(attobj.name) track by $index" style="float:left; padding-right: 3px; padding-bottom: 5px;">
        <div class="tag sortableTag">
          <a href="#/view/{{ dbo2.cid }}" target="_blank">{{ dbo2.displayName() }}</a>
          <a href="" class="glyphicon glyphicon-remove" ng-click="removeValue(dbo, attobj.name, $index)"></a>
        </div>
      </div>
    </div>
  </div>
  
  <div ng-include="'typeaheadtemplate'" style="width: 100%;"></div>
</script>

CSS:

.superResponsive .editGridCell{
  border: 1px solid lightBlue;
  vertical-align: top;
  position: relative;
}

.contentEdit{
  display:none;
  overflow: hidden;
  padding:4px;

}

.contentValues{
  display:block;
  color:#0887A7!important;
  min-height: 20px;
  overflow: hidden;
  /*min-width:100px;*/
  width:100%;
  height: 25px;
  padding: 5px;
}
.contentValuesDecompressed{
  display:block;
  color:#0887A7!important;
  min-height: 25px;
  overflow: visible;
  /*min-width:100px;*/
  width:100%;
  height: auto;
  padding: 5px;
}

.contentDecompressed{
    color:#0887A7!important;
    min-height: 25px;
    overflow: visible;
    width:auto;
    height: auto;
    padding: 5px;
}

.editGridCell:hover .contentEdit{
  display: block;
  height:auto;
  width: 90%;
  background:#d8ecf2;
  position:absolute;
  z-index: 40;
  overflow: visible;
}

.editGridCell:hover .contentValuesDecompressed{
  visibility: hidden;
}

.editGridCell:hover .contentValues{
  visibility: hidden;
  overflow:visible;
}

在手机上，我点击手机并点击标签(如果标签会显示)!

简化问题:

https://jsfiddle.net/coolcatDev/yqjzvcyw/

Answer 1

我可以像这样延迟悬停效果:

html:

<div class="aDiv">
    <a class="aLink" href="https://google.com">Link</a>
</div>

CSS:

.aDiv{
    border:1px solid black;
    width:100px;
}
.aLink{
    visibility:hidden;
}
.aDiv:hover .aLink{
    visibility:visible;
    transition-delay: .5s;
}

https://jsfiddle.net/coolcatDev/yqjzvcyw/12/