小编Dan*_*iel的帖子

当标签只有一个按钮时,按钮单击不会(完全?)触发标签

我有两个input类型radio。每个input都有一个对应label的button内部。

我期望单击按钮与单击标签具有相同的效果:将检查相应的输入。

然而,这不会发生。如以下代码段所示,悬停并按下按钮确实会触发单选按钮中相应的样式更改,但即使简单标签按预期工作,单击操作也不会选择输入。

我已经检查过buttons 是 s 的合法孩子label。标签允许短语内容,按钮是短语内容,所以一切都应该没问题。

我还尝试向两个按钮的单击事件添加一个事件侦听器,并在其中调用event.preventDefault(),只是为了确保按钮的默认行为不会阻止事件冒泡到标签,但无济于事,标签正在接收事件。

由于这在浏览器之间似乎是一致的(在 Firefox 41a 和 Opera 31b / Chrome 44 上测试):

  1. 我失踪了这里发生了什么?
  2. 如何在没有技巧的情况下实现这一点(例如将标签设置为按钮的样式)?

<div>
  <input type="radio" name="A" id="one" />
  <label for="one">One</label>
  <label for="one">
    <button type="button">One</button>
  </label>

  <input type="radio" name="A" id="two" />
  <label for="two">Two</label>
  <label for="two">
    <button type="button">Two</button>
  </label>
</div>
Run Code Online (Sandbox Code Playgroud)

html

5
推荐指数
1
解决办法
3217
查看次数

SVG ng-repeat'元素上的SMIL动画仅在页面加载时发生

我正在使用ng-repeat指令<rect>为<animate>孩子生成一些。

在页面加载时,动画会正确触发,并且一切都会按预期进行。但是,当我添加新<rect>动画时,不会发生动画。

下面的代码片段演示了这种行为:

function Controller($scope) {
  $scope.rects = [];
  var spacing = 5;
  var width = 10;
  var height = 100;
  var x = 10;
  var y = 10;

  $scope.newRect = function() {
    $scope.rects.push({
      x: x,
      y: y,
      width: width,
      height: height
    });
    x += spacing + width;
  };

  for (var i = 0; i < 5; i++) {
    $scope.newRect();
  }

}
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="Controller">
  <svg width="1000" height="200">
    <rect ng-repeat="rect in rects" …
Run Code Online (Sandbox Code Playgroud)

animation svg smil angularjs

2
推荐指数
1
解决办法
1112
查看次数

标签 统计

angularjs ×1

animation ×1

html ×1

smil ×1

svg ×1