让 div 可点击，但里面的文字不可点击

Question

我正在尝试使一个没有链接的 div 可点击。点击只是将会话变量设置为 div 的 id。我的问题是，span、h3 和 p 部分是从 div 中单独注册的。这会影响样式和行为。
编辑：我的问题可能不够清楚：设置会话变量不是问题，我只是没有显示 js代码。当我单击 div 中未被文本覆盖的任何位置时，它工作正常。但是，当我单击有文本的地方时，单击的是文本而不是 div。由于文本没有 id，会话变量没有正确设置，我的“活动”类的样式被应用于文本而不是 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

为什么这不起作用？不确定您是如何设置会话变量的，但我会使用 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);
});