使用 Jquery 将用户操作记录到数组中

Question

我正在尝试在jquery中制作一个简单的用户单击动作记录器，但遇到了一些麻烦。我希望用户单击记录按钮，然后单击后记录他单击的内容。然后按停止按钮停止录制。到目前为止，我所拥有的是：

var stack = new Array();
var recordmode = false;
$('#record').click(function(){
recordmode = true;
alert('You are now in record mode');
});
$('#stop').click(function(){
recordmode = false;
console.log(stack);//output what's in the array
stack = []; //erase the array
});

$('#note_markers').click(function(){
if(recordmode){
$('.one_0').click( function(){ stack.push('one_0'); })
$('.one_1').click( function(){ stack.push('one_1') ; })
}
});

以及后来的开始和停止按钮。

<a id='record'>R</a>
<a id='stop'>stop</a>
                           <div id="one_notes">
                                <a class="one_0"></a>
                                <a class="one_1"></a>
                                <a class="one_2"></a>
                                <a class="one_3"></a>
</div>

同样在停止和擦除阵列之前。我想用数组中记录的内容构建一个/one_0/one_1/one_0 等形式的 URL。（不过还没有到那部分）

发生的情况是第一次点击没有被记录，然后它开始放入两个相同的元素。我不知道为什么我会得到当前的行为。

有什么想法吗？

作为旁注，有没有办法获取任何点击元素的名称？

Answer 1

你的问题是你从#note_markers那里得到一个点击，从.one_1那里得到一个点击，因为它冒泡了。

试试这个：

$('#note_markers a').click(function(){
    if(recordmode)
        stack.push($(this).attr('class'));
});

您可以更改事件侦听器以侦听您实际需要的任何内容，但这将根据提供的 html 执行您想要的操作

Answer 2

您可能希望尝试将要跟踪的每个操作的点击处理程序分开。

$('.one_0').click( function(){ 
    if(recordmode){
      stack.push('one_0'); 
    }
});
$('.one_1').click( function(){ 
    if(recordmode){
      stack.push('one_1'); 
    }
});

这看起来像很多重复的代码...让我们尝试清理一下。为什么不更进一步，为所有"可记录"操作提供具有唯一rel属性的同一类......

_{使用更新的 1.7+ jQuery 语法。}

<a class="recordable" rel="one_1"></a>
<a class="recordable" rel="one_2"></a>
$('.recordable').on('click', function(){ 
    if(recordmode){
      stack.push($(this).attr('rel'); 
    }
});

至于从生成的操作数组中构建URL，您可以使用JavaScripts join()函数。

var targetURL = _base_url + stack.join('/');

---

您可以使用上面评论中提到的方法捕获对任何元素的点击......但是，我建议您准确标记要捕获的操作，而无需捕获所有内容...