html - 使div可点击，但里面的文字不可点击

Question

我试图让一个没有链接的 div 可以点击。单击只是将 session 变量设置为 div 的 ID。我的问题是，span、h3 和 p 部分是从 div 中单独注册的。这会影响样式和行为。
编辑:我可能没有把我的问题说清楚:设置 session 变量不是问题，我只是没有显示 js 代码。当我单击 div 中未被文本覆盖的任何位置时，它工作正常。但是，当我单击有文本的某个地方时，单击的是文本而不是 div。由于文本没有 id， session 变量没有正确设置，我的“事件”类的样式被应用到文本而不是 div。

div的代码:

  <div class="col-md-6 col-sm-6 col-xs-12">
    <div class="panel panel-default">
      <div class="task-option-button panel-body" id="create_your_own">
        <span class="glyphicon glyphicon-list-alt"></span>
        <h3>Individual Task</h3>
        <p>Create a new task without a template</p>
      </div>
    </div>
  </div>

CSS

.task-option-button >span,h3,p {
    z-index:1;
}
.task-option-button{
    text-decoration:none;
    text-align: center;
    padding:10px;
    height:150px;
    width:100%;
    background-color:#f5f5f5;
    cursor: pointer;
    cursor: hand;
    z-index:10;

}

.task-option-button:hover {
    text-decoration:none;
    border-bottom:5px solid #D8853B;
    background-color:#FFF;
}

我一直在玩弄 z-index，但无济于事。更糟糕的是，在另一页上，这种结构运行完美。一个可点击的面板，里面有不同的元素，我点击的所有地方都是点击面板，而不是文本。有人有想法吗？

Answer 1

编辑

我制作了一个行为符合预期的代码笔；对照你所拥有的，看看是否有错误。

CODEPEN EXAMPLE

为什么这行不通？不确定您如何设置 session 变量，但我会使用 cookie。

var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

$('#create_your_own').on('click', function() {
    var id = $(this).attr(id);
    createCookie('divID', id, 10);
});