停止传播：冒泡？答案

【问题标题】：Stop propagation: bubble down?停止传播：冒泡？
【发布时间】：2016-01-25 12:53:47
【问题描述】：

我不确定这是一个与设计缺陷一样多的传播问题，我已经读到传播问题都是一个冒泡的方式，但它就是这样。我有一个表格编辑网格。

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

加载时编辑 div 不显示，视图 div 显示。悬停单元格时会显示编辑 div，但不会显示视图值。

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

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

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

【问题讨论】：

我们无法对您的图片进行故障排除。显示的代码中没有任何与点击处理相关的内容。提供相关代码。复制问题的演示也会有所帮助
已添加，对此感到抱歉

标签： javascript html css angularjs stoppropagation

【解决方案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/

【讨论】：