停止传播：气泡下降？

Question

我不确定这是一个传播问题还是一个设计缺陷，我读到过传播问题都是冒出来的，但它就是这样。我有一个 table 编辑网格。

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

加载时编辑 div 未显示，视图 div 显示。将鼠标悬停在单元格编辑 div 上，但不显示视图值。

在 phones/tablets 上悬停不会启动，因此需要单击单元格才能从视图切换到编辑以及其他方式。

当编辑视图包含可点击元素（在本例中为标签）时就会出现问题。 phones/tablets 如果在那些可点击元素将出现的坐标上进行点击，这些元素将被点击。

<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/

停止传播：气泡下降？

Stop propagation: bubble down?

html

javascript

css

stoppropagation

angularjs