javascript - 使整个父 div 成为可点击区域

Question

这个问题可能已经回答过很多次了，但是我需要帮助，因为我无法实现我想要做的事情。

我的看法是:

<div class="bookView">
    @for (int i = 0; i < Model.Count; i++)
    {
        <div class="bookUnit" onclick="$@Url.Action("SeeBook", new { bookID = Model[i].BookID})">
            <span class="linkSpan"></span>
            <div class="bookTitle" data-id="@Model[i].BookID">
                @Html.DisplayFor(_item => _item[i].BookName) 
            </div>    
            <div class="bookDetail">
                <div class="bookCategory">
                    @Html.DisplayFor(_item =>_item[i].Category.CategoryName)
                </div>
                <div class="bookEditor">
                    @Html.DisplayFor(_item => _item[i].Editor.EditorName)
                </div>
                <div class="bookDate">
                    @Model[i].DateAdded.ToShortDateString()
                </div>
            </div>
            <div class="bookScore">
                Score: @Html.DisplayFor(_item => _item[i].Score)
            </div>
            <div class="clear"></div>
        </div>
    }
</div>

这是相关的 CSS:

.linkSpan {
    width:100%;
    height:100%;
    /*top:0;*/
    /*left: 0;*/
    display: block;
    /* edit: added z-index */
    z-index: 1;
    /* edit: fixes overlap error in IE7/8, 
        make sure you have an empty gif */
    /*background-image: url('empty.gif');*/
}

.bookView {
    padding: 5px;
    margin: 5px;
    vertical-align: middle;
}

.bookView div {
    padding: 5px;
}

.bookUnit {
    clear: both;
    position: relative;
    background-color: white;
    border: 1px solid lightblue;
    z-index: 0;
}

.bookUnit:hover {
    border: 1px solid red;
}

.bookTitle {
    float: left;
    font-weight: bold;
}

.bookDetail {
    float: left;
}

.bookScore {
    float: left;
}

因此目标是整个 bookUnit div 及其所有内容将成为一个可点击区域，它将 ID 传送到我的 Controller 方法。每个循环大约有 20 本书 book，但每个 div 都有自己的 ID。

如您所见，我已经尝试了 anchor 方法，但它没有用...

Answer 1

实际上您现在需要包含 JavaScript 代码，检查this tutorial这样做。

但有一种巧妙的方法可以使用 CSS 代码实现这一点你必须在你的 div 标签中嵌套一个 anchor 标签，你必须将这个属性应用到它，

display:block;

完成后，整个宽度区域都可以点击(但在 anchor 标签的高度范围内)，如果你想覆盖整个div区域，你必须将 anchor 标签的高度设置为div标签的高度，例如:

height:60px;

这将使整个区域可点击，然后您可以将 text-indent:-9999px 应用于 anchor 标记以实现目标。

这真的很棘手也很简单，它只是使用 CSS 代码创建的。

这是一个 example : http://jsfiddle.net/hbirjand/RG8wW/