Question

以下是一个案例：

<a href="#1" style="height:100px; width:100px;">
  <div class="#2"></div>
  <div class="#3"></div>
  <div class="#4"></div>
  <div>
    <input onclick="#5" />
  </div>
</a>

默认情况下，如果我点击＃2，＃3，＃4，＃5，我将被重定向到＃1。

那么如果我想在没有激活＃1的情况下点击输入，我必须如何修复CSS？

提前致谢！

Answer 1

刚刚放一个

return(false);

单击输入时执行的JavaScript末尾的

。

Answer 2

假设您的标记写得正确，请使用z-index：

 <input type="button" style="z-index:99" onclick="foo()" />

虽然我想知道你是否应该重新考虑你的页面布局并避免这么大的链接标签......

Answer 3

是的，你可以这样做：

<a href="#1" style="height:100px; width:100px;">
  <div class="#2"></div>
  <div class="#3"></div>
  <div class="#4"></div>
  <div>
    <input onclick="doSomething(); return false;" />
  </div>
</a>

Answer 4

这是我多次遇到的一个有趣的问题。

你基本上需要监听父元素上的click事件，然后检查它是否是一个锚或其他元素然后对它采取行动。

$('YOUR ELEMENT').click(function (e) {
  var target = $( e.target );
  if ( target.is( "a" ) ) {

    Do something
  }
  else if (target.is( "input" ))
  {
    Do something else

  }
});

虽然我不建议将锚作为div的包装，因为它在某些情况下会中断，通过这种方法，您可以轻松地使用带有数据链接属性的包装div并通过JavaScript以编程方式导航到此链接

链接链接 - 如何在没有父链接激活的情况下激活JS代码？

4 个答案: