在highcharts javascript file第1126行中有一个函数addEvent
/**
* Add an event listener
* @param {Object} el A HTML element or custom object
* @param {String} event The event type
* @param {Function} fn The event handler
*/
addEvent: function (el, event, fn) {
$(el).bind(event, fn);
},
我想调用我的自定义函数而不是默认函数，同时我不想更改highcharts.js。
我想通过外部函数分配它，有什么办法可以实现这个吗？
我的新代码将是
addEvent: function (el, event, fn) {
if(typeof(fn)=="string"){
try {
eval(fn);
} catch (e) {
if (e instanceof SyntaxError) {
console.log(e.message);
}
}
}
$(el).bind(event, fn);
}
不幸的是我不知道为什么包装addEvent不起作用（虽然应该！），但你可以覆盖或包装导入事件的点，做类似的事情（但只针对点）：
(function (H) {
H.wrap(H.Point.prototype, 'importEvents', function () {
if (!this.hasImportedEvents) {
var point = this,
options = H.merge(point.series.options.point, point.options),
events = options.events,
eventType;
point.events = events;
for (eventType in events) {
if (typeof events[eventType] == "string") {
try {
events[eventType] = eval(events[eventType]);
} catch (e) {
if (e instanceof SyntaxError) {
console.log(e.message);
}
}
}
H.addEvent(point, eventType, events[eventType]);
this.hasImportedEvents = true;
}
}
});
}(Highcharts));
但是：Kua zxsw指出
您可以通过http://jsfiddle.net/cXS5u/函数覆盖此函数。
我会试试这个：
wrap
使用Highcharts的Highcharts.addEvent = (function(orig) {
return function(el, event, fn) {
if(typeof fn == "string") {
try {
eval(fn);
} catch (e) {
if (e instanceof SyntaxError) {
console.log(e.message);
}
}
}
orig(el, event, fn);
};
})(Highcharts.addEvent);
方法，这应该是
wrap通过使用wrap实用程序，不可能重现在第1126行修改(function(H) {
H.wrap(H, "addEvent", function(addEvent, el, event, fn) {
if(typeof fn == "string") {
try {
eval(fn);
} catch (e) {
if (e instanceof SyntaxError) {
console.log(e.message);
}
}
}
addEvent(el, event, fn);
});
})(Highcharts);
源代码的效果，因为由于我不完全理解的原因，包装不适用于对addEvent进行的大量内部调用，包括那些被触发为初始配置中指定的事件的结果，例如plotOptions / series / point / events下的事件。
但是，当像这样添加时，wrap会应用于事件：
addEvent或者在您的情况下，将函数作为字符串添加到点事件：
(function (H) {
Highcharts.Chart.prototype.callbacks.push(function (chart) {
H.addEvent(chart.container, 'click', function() { alert('click!') });
});
}(Highcharts));
所以你的wrap函数可以像这样处理这两个：
(function (H) {
Highcharts.Chart.prototype.callbacks.push(function (chart) {
H.addEvent(chart.series[0].data, 'click', "(function() { alert (this.y);})");
});
}(Highcharts));
我授予的并不是你所要求的，但可能会为你想要实现的目标提供另一种解决方案。
在这里演示所有这些：(function (H) {
H.wrap(H, "addEvent", function (addEvent, el, event, fn) {
if (typeof fn == "string") {
try {
var evalfn = eval(fn);
addEvent(el, event, evalfn);
} catch (e) {
if (e instanceof SyntaxError) {
console.log(e.message);
}
}
} else {
addEvent(el, event, fn);
}
});
})(Highcharts);
用http://jsfiddle.net/8wRAs/修改Highcharts.addEvent不起作用，因为Highcharts Highcharts.wrap()到saves an internal reference。更改外部addEvent对内部参考没有影响。
向后追溯代码，你会发现Highcharts.addEvent addEvent。可以使用comes from window.HighchartsAdapter将Highcharts与其他JavaScript框架一起使用，该框架使用适用于特定框架的版本覆盖默认的loading the appropriate adapter。
要在Highcharts保存内部引用之前修改默认适配器上的window.HighchartsAdapter，我们可以加载两次主JS文件：（addEvent）
demo
这将导致为JS文件发出第二个HTTP请求，但它应该返回304响应，因为浏览器应该已经从第一个请求缓存了该文件。
虽然这可能现在可行，但猴子修补其他人的代码并不是长期进行的最佳方式，例如您或其他开发人员可能会决定从现在起一年内升级到最新版本的Highcharts（使用完全不同的内部API），而不会意识到/记住此更改。在采用猴子补丁之前，我会考虑其他方法来做你想做的事情。
请注意highcharts.js中的这些代码行：
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
// Highcharts detects if it has been loaded more than once
// and throws an error to alert developers
// We work around this by unsetting the Highcharts object
window.Highcharts = null;
window.HighchartsAdapter.addEvent = function (el, event, fn) {
// add your custom code here
$(el).bind(event, fn);
};
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
由于在// check for a custom HighchartsAdapter defined prior to this file
var globalAdapter = win.HighchartsAdapter,
adapter = globalAdapter || {};
// Initialize the adapter
if (globalAdapter) {
globalAdapter.init.call(globalAdapter, pathAnim);
}
// Utility functions. If the HighchartsAdapter is not defined, adapter is an empty object
// and all the utility functions will be null. In that case they are populated by the
// default adapters below.
中指定了addEvent，因此您需要创建一个自定义window.HighchartsAdapter来覆盖它。在HighchartsAdapter上有一个自定义highcharts适配器的示例。
以与所有浏览器兼容的方式轻松使用DOM事件。这是经验......
创建你的功能，例如mouseup ...
github
立即创建您的活动......
var MeObjectDOM_mouseup = function(){
Me blabla code....
}
您的活动现在与IE，NETSCAPE，CHROME，EDGE，OPERA，FIREFOX，SAFARI，甚至Safari 5或IE 5,6和Netscape 4（^ __ ^）等旧版本兼容。