Chrome:使用锚内输入日期时点击疯狂

Chrome: click madness when using input date inside anchor

本文关键字：日期 疯狂 输入 Chrome      更新时间：2023-09-26

我希望在锚点中有一个<input type="date"/>，因为我希望我的列表项是可点击的。考虑：

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<ul class="container list-group">
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
    <a class="list-group-item" href="http://google.com"><input type="date" placeholder="YYYY-MM-DD" /> bla bla bla</a>
</ul>
</body>
<script>
    $('input').click(function(ev) {
        //return false;
        //ev.stopPropagation();
        ev.preventDefault();
    });
</script>
</html>

https://jsfiddle.net/qvatd8f1/

我的问题是，为了避免点击传播到锚点，我需要停止事件传播。但是，至少在我的Chromium 51中，显示日历的输入日期箭头(位于字段右侧(停止工作。

(该代码使用引导程序，但它并不相关。没有它，问题可以很容易地复制。(

建议？：(

顺便说一句，我最近才意识到<input type="date"/>是Chrome特有的。我们很可能想在产品中改变这一点。但是，就目前而言，由于它只是一个向客户端展示的原型，如果有一个简单的方法来解决这个问题，那就太好了。：(

似乎最简单的解决方案是不使用标签，而是使用简单的li，并通过JS:更改url

<li data-href="https://google.com">...</li>
$(".container li").click(function() {
    window.location.href = $(this).data("href")
})
相关文章：