请教： 对象不支持addEventListener属性或方法

cloveng 2014-01-20 03:57:53
错误定位在32行： document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});

代码是为了实现在一个图片(地图)上实现几个标签，点击后播放语音，语音可以在IE上播放，可能ie容错比较好，但是在手机上语音就播放不了。

以下是部分代码，再多就贴不上了
<!doctype html>
<!--[if lt IE 8]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>姝峰彶瓒宠贰涔嬫梾</title>
<meta name="description" content="姝峰彶瓒宠贰涔嬫梾 Macau">
<meta name="author" content="Jeremy">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">

<link rel="stylesheet" href="./css/bootstrap.css">
<link href="./css/prettify.css" rel="stylesheet" />
<link href="./css/LiteTooltip.1.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/style.css" />
<script src="./js/jquery-1.9.0.min.js"></script>
<script src="./js/howler.min.js"></script>
<script type="text/javascript" src="./js/fj.js"></script>
</head>
<body>
<script type="text/javascript">

var h = $( window ).height();
$('#mapcontorl').css("min-width", h + 45);
$('#mapcontorl').css("max-width", h + 45);
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});
sound=[];
soundY=[];


//stop all the meida-begin--
function endPlay(){
for(var i=1;i<17;i++){
sound[i].stop();
soundY[i].stop();
}
}
function NewEndPlay(){

}


sound[1] = new Howl({
urls: ['./audio/01.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});

sound[2] = new Howl({
urls: ['./audio/02.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[3] = new Howl({
urls: ['./audio/03.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[4] = new Howl({
urls: ['./audio/04.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[5] = new Howl({
urls: ['./audio/05.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[6] = new Howl({
urls: ['./audio/06.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[7] = new Howl({
urls: ['./audio/07.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[8] = new Howl({
urls: ['./audio/08.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[9] = new Howl({
urls: ['./audio/09.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[10] = new Howl({
urls: ['./audio/10.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[11] = new Howl({
urls: ['./audio/A11.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[12] = new Howl({
urls: ['./audio/12.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[13] = new Howl({
urls: ['./audio/13.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[14] = new Howl({
urls: ['./audio/14.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[15] = new Howl({
urls: ['./audio/15.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
sound[16] = new Howl({
urls: ['./audio/16.m4a'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[1] = new Howl({
urls: ['./audio/AY/A01_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[2] = new Howl({
urls: ['./audio/AY/A02_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[3] = new Howl({
urls: ['./audio/AY/A03_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[4] = new Howl({
urls: ['./audio/AY/A03_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[5]= new Howl({
urls: ['./audio/AY/A04_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[6]= new Howl({
urls: ['./audio/AY/A06_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[7] = new Howl({
urls: ['./audio/AY/A07_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[8]= new Howl({
urls: ['./audio/AY/A08_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[9] = new Howl({
urls: ['./audio/AY/A09_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[10] = new Howl({
urls: ['./audio/AY/A10_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[11] = new Howl({
urls: ['./audio/AY/A11_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[12] = new Howl({
urls: ['./audio/AY/A12_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[13] = new Howl({
urls: ['./audio/AY/A13_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[14] = new Howl({
urls: ['./audio/AY/A14_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[15] = new Howl({
urls: ['./audio/AY/A15_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
soundY[16] = new Howl({
urls: ['./audio/AY/A16_bip-MP3.mp3'],
autoplay: false,
loop: false,
volume: 0.5
});
//--stop all the media -ends


</script>
<div id="mapcontorl" class="imagehotspot-container" style="position: relative; max-width: 600px; /* max-width: actual width of image */ width: 100%; height: auto; z-index: 101;">
<div style="position: relative; height: 0px; padding-bottom: 81.17%; /* padding-bottom: image's height divided by width multiply by 100 */">
<img src="./images/map.jpg" style="position: absolute; top: 0px; left: 0px; z-index: 102; width:1000px; " />
<div id="photspot_p2" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 71%; left: 81.9%;"></div>
<div id="photspot_p3" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 72%; left: 76.5%;"></div>
<div id="photspot_p4" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 65%; left: 78%;"></div>
<div id="photspot_p5" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 38%; left: 89%;"></div>
<div id="photspot_p6" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 55.5%; left: 69.6%;"></div>
<div id="photspot_p7" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 35%; left: 53%;"></div>
<div id="photspot_p8" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 25%; left: 59%;"></div>
<div id="photspot_p9" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 21%; left: 61.5%;"></div>
<div id="photspot_p10" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 36.2%; left: 39%;"></div>
<div id="photspot_p11" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 42%; left: 39%;"></div>
<div id="photspot_p12" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 41%; left: 26%;"></div>
<div id="photspot_p13" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 30%; left: 35%;"></div>
<div id="photspot_p14" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 38%; left: 8%;"></div>
<div id="photspot_p15" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 56%; left: 11%;"></div>
<div id="photspot_p16" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 60%; left: 7.5%;"></div>
<div id="photspot_p1" style="position: absolute; z-index: 103; width: 3.1%; height: 4.1%; top: 94.03%; left: 95.41%;"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {

$("#photspot_p1").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
$("#photspot_p2").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
$("#photspot_p3").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
$("#photspot_p4").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
$("#photspot_p5").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
$("#photspot_p6").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
$("#photspot_p7").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
$("#photspot_p8").css({
"border": "solid 1px #eeee00",
"background": "#aadd00",
"border-radius": "6px"
});
...全文
10389 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
dmz71991 2014-09-16
  • 打赏
  • 举报
 回复 
 //判断IE7\8 兼容性检测
            var isIE=!!window.ActiveXObject;
            var isIE6=isIE&&!window.XMLHttpRequest;
            var isIE8=isIE&&!!document.documentMode;
            var isIE7=isIE&&!isIE6&&!isIE8;
            
            if(isIE8 || isIE7){
                li.attachEvent("onclick",function(){
                    _marker.openInfoWindow(_iw);
                })    
            }else{
                li.addEventListener("click",function(){
                    _marker.openInfoWindow(_iw);
                })
            }
人生难得一只鸡 2014-01-20
  • 打赏
  • 举报
 回复
如果用原生的绑定事件，需做兼容处理，可以利用jquery的bind或者live document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideToolbar'); }); =》 $(document).bind('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hideToolbar');
张含韵 2014-01-20
  • 打赏
  • 举报
 回复
用jQuery吧，话说楼主的代码不用代码标签我实在看不下去啊
JavaScript获取图片的file对象数据（不通过input）
JavaScript不通过input标签，来获取图片的file对象，实现图标库功能
word图文混排复制到TinyMCE图片不显示
ueditor粘贴不能粘贴word中的图片是一个很头疼的问题，在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴，因为这个需求头疼了半个月，因为前端方面因为安全的原因是不允许访问本地文件的。接下来是怎么拿到本地地址的文件，怎么将本地地址搞成文件，我查阅了好久好久的资料，还请教了各路大神（骚骚的三水，和传说中的周皇），得到一个结论，单纯前端不可能通过本地地址拿到文件（于是第一条解决思路出来了，在执行 罪魁祸首代码 之前，将本地的地址过滤出来，上传到服务器然后用服务器的地址进行替换，
建一个XMLHttpRequest对象池
在ajax应用中，通常一个页面要同时发送多个请 求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖掉，如果每次都创建一个新的 XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有空闲的对象，则使用此对象， 否则将创建一个新的对象。下面是我最近写的一个简单的类： /** * XM
题解 | #零食类商品中复购率top3高的商品#
阿里系面试 阿里淘天 挂基本数据类型 然后一堆判断，以及为什么？比较的时候是如何转换？var let const，const声明的对象可以修改属性吗？如何使一个对象不能被Offer选择 能动鼠鼠累了，想上岸真诚求教{nowcoder-vote}{87818}腾讯面试 腾讯安全一面 挂数组的indexOf方法实现HardMan实现css选择器优先级display:none和visibility:hidden的区别v-if和v-十月
dokuwiki支持Word上传
ueditor粘贴不能粘贴word中的图片是一个很头疼的问题，在我们的业务场景中客户要求必须使用ueditor并且支持word的图片粘贴，因为这个需求头疼了半个月，因为前端方面因为安全的原因是不允许访问本地文件的。接下来是怎么拿到本地地址的文件，怎么将本地地址搞成文件，我查阅了好久好久的资料，还请教了各路大神（骚骚的三水，和传说中的周皇），得到一个结论，单纯前端不可能通过本地地址拿到文件（于是第一条解决思路出来了，在执行 罪魁祸首代码 之前，将本地的地址过滤出来，上传到服务器然后用服务器的地址进行替换，
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章