【问题标题】:How to interrupt an onclick call and put in my own?如何中断 onclick 调用并放入我自己的?
【发布时间】:2013-02-25 17:53:53
【问题描述】:

我正在制作一个使用 JavaScript、jQuery 和 jPlayer 制作音频播放列表的网站。我还在慢慢自学 JavaScript,所以我有点困惑。

我在 jPlayer 上有一个链接元素,我想让用户点击它并让它在我的音乐博客上加载相应的帖子。我包含的 jPlayer 和 jQuery 代码都是用简写形式编写的,所以我无法解读实际发生的情况。

我要更改的元素写为a.jp-playlist-item。在 JavaScript 中是否有一种简单的方法来添加一个 onclick 函数,该函数将覆盖 jPlayer 设置的默认函数,以便我可以打开一个新选项卡并将它们重定向到一个站点?

如果您想查看我的网站,它是http://www.startingtofeelit.com,我正在尝试制作的链接位于顶级音乐播放器上。

【问题讨论】:

  • 您可以使用.off取消绑定直接绑定到元素的任何点击事件
  • 如果您想更好地了解代码中发生的情况,您可以使用 javascript prettifier 网站“去缩小”jPlayer 代码。就个人而言,请确保您有充分的理由使用额外的标签;如果这种行为不是用户点击时所期望的行为,那么这种浏览器行为只会让大多数用户感到恼火。

标签: javascript jquery html redirect


【解决方案1】:

你应该使用 preventDefault

$(".yourClass").click(function(event) {
  event.preventDefault();
  // DO SOME STUFF
});

【讨论】:

  • 我很确定 jplayer 操作不是默认操作。不过,可能有帮助的是stopImmediatePropagation
  • 所以我试着按照你说的去做。也许我没有包括正确的课程或其他东西。在 Firefox 中检查元素后,我看到了“a.jp-playlist-item.jp-playlist-current”。我尝试使用 '$(".jp-playlist-item")'、'$(".jp-playlist-current")' 和 '$(".jp-playlist-item.jp-playlist-current") ' 来自您上面的代码,但无济于事。难道我做错了什么?我只是使用下面的代码来检查它是否正常工作。它在我的标题中。 $(".jp-playlist-current").click(function(event) { event.preventDefault(); alert("Hi"); });
【解决方案2】:

对于造成的误解,我深表歉意... JQuery 选择器在我上一个答案中不正确。

这样做:

$(".jp-seek-bar").replaceWith($(".jp-seek-bar").clone())
$(".jp-seek-bar").click(function(){ 
    alert(1);
    /*WRITE YOU CODE HERE*/
});

希望对你有帮助

【讨论】:

  • 似乎什么也没做。我试过有和没有 ;在你的第一行之后。
  • 确保代码在 jPlayer 启动之后执行。可以肯定的是,在页面末尾添加一个脚本,即: $(document).ready(function() { /*PREVIOUS CODE*/ })
  • 例如,您可以在 chrome 控制台上测试上面的代码。如果将上面的代码放在 chrome 控制台上,您会看到它可以工作...我认为您没有在正确的位置启动该代码。
  • 一些事情......我为什么要使用jp-seek-bar?我不希望在他们单击搜索栏时出现,而是在单击歌曲名称时出现。当我在 Firefox 中检查元素时,它显示a.jp-playlist-item.jp-playlist-current。试图改变它,但没有运气。我把它放在我的 document.ready 函数中。
  • 在这种情况下,您需要以下代码: $("a.jp-playlist-item").each(function() { $(this).replaceWith($(this).clone() ) }) $("a.jp-playlist-item").click(function(){alert(1);}) 抱歉造成误解。首先在 google chrome/firefox 控制台上测试
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-05-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-09
  • 2015-10-17
相关资源
最近更新 更多