chrome 下，如何知道鼠标点击触发了什么代码？

[alexapollo]

好奇http://douban.fm/的右拉效果怎么做的，用jQuery的animate跨平台兼容性不大好

[solodxg]

插件 Visual Event，谁用谁知道
https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim

[alexapollo]

@solodxg 好东西，就是慢了点……

[wssgcg1213]

鼠标点击 click事件？
chrome自带的developer tool里面
选中节点之后 可以在event listener里面找到某个事件绑定的函数

[alexapollo]

@wssgcg1213 没看懂click对应的事件，写的是jQuery函数，好像没写实际触发的函数？
实际触发的函数好像是这个：
function (D){if($("#fm-sidebar").hasClass("open")){B(["send","event","Button","clicked","Hide Explore Panel"]);C("close")}else{B(["send","event","Button","clicked","Show Explore Panel"]);C("open")}}

[chairuosen]

@alexapollo 在jquery的click上打断点，看调用栈就知道了

[jsonline]

var C = function(D) {
if (D == "close") {
$.event.trigger("HIDE_SCROLLBAR");
$("#fm-sidebar").animate({width: 26}, 500, function() {
$("#fm-sidebar").toggleClass("open");
j()
})
} else {
if (D == "open") {
$.event.trigger("SHOW_SCROLLBAR");
$("#fm-sidebar").animate({width: 674}, 500, function() {
$("#fm-sidebar").toggleClass("open");
j()
})
} else {
if (D == "init") {
$.event.trigger("SHOW_SCROLLBAR");
$("#fm-sidebar").animate({width: 674}, 500)
}
}
}
if (!$("#fm-sidebar").hasClass("open")) {
k();
$("#fm-channel-list").css("overflow-y", "hidden");
unbindPlayerListMW();
$.event.trigger("START_SCROLLSTATUS")
} else {
if (l) {
clearInterval(l)
}
$("#fm-channel-list").css("overflow-y", "auto");
$.event.trigger("STOP_SCROLLSTATUS");
bindPlayerListMW()
}
};

确认是 jQuery 的 animate

[jsonline]

调试办法：
1. 在 elements 面板选中 <div id="fm-sidebar"
2. 右键 Break on ... -> Attributes modifications
3. 触发事件
4. 遇到压缩的代码就格式化之。

[jsonline]

jQuery的animate跨平台兼容性真的是毋庸置疑的呀，jQuery 火的主要原因就是兼容性好，以及API优雅。
不知道你为什么觉得兼容性不好，遇到什么 bug 了？

[jsonline]

接7楼 忘了说
5. 注意观察调试窗口的 Call Stack。

[jsonline]

@solodxg 小页面还不错。如果在胖页面里开，慢到不行啊。

[alexapollo]

@jsonline 我明天仔细研究一下，然后再和你讨论。
可能是我为了做多浏览器的兼容把JS写的不对了。。
现象是在safari下滑动的不流畅，没有douban.fm的效果

[joyee]

@solodxg 好用。点赞~

[Epsil0n9]

希望FIREFOX也能有类似扩展。。。

[66beta]

@solodxg 赞！