Question

任何人都可以想到点击事件可以在a标记上使用，而不是span上的原因吗？我正在创建一个富文本编辑器，并有一个粗体按钮，单击时应该使文本加粗。它只在我使用锚元素时才有效。我尝试使用跨度，没有任何反应。 html是我唯一改变的东西，所以我不认为这是一个JavaScript问题。

$(document).ready(function(){

//creates the toolbar~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  $('#rte').focus()

  var tools = [];
  tools.push('underline');
  tools.push('italic');
  tools.push('bold');
  tools.push('justifyCenter');
  tools.push('justifyLeft');
  tools.push('justifyRight');

  var simple_toolbar = function(){
  //iterates through each tool and adds its functionality to the editor
  $.each(tools, function(index,value){ 
      $('#'+value).click(function(event){
        document.execCommand( value, false, null);
        $('#rte').focus();
        return false;
      });
      //end of click function
  });
    //end of each iterator  

  };
  //end of simple toolbar function

  //invokes the simple toolbar.
  simple_toolbar();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



});
//end of the DOM loader

<!doctype html>

<html>

  <head>
    <title>An HTML5 page</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
  </head>

  <body>
    <div id="wrapper">
      <div id="controls">
        <!-- The only button working here is the bold because it is an <a> --> 
        <a href="#" id="bold"></a>
        <span id="italic"></span>
        <span id="underline"></span>
        <span id="justifyLeft"></span>
        <span id="justifyCenter"></span>
        <span id="justifyRight"></span>   
      </div><!--end of controlls div-->

      <div contenteditable="true" id="rte"></div>

      <textarea id="my_form" rows="8" cols="58" ></textarea>
  </div><!--end of the wrapper div-->

  </body>

</html>

#bold{
  display:block;
  width:30px;
  height:30px;
  background-image:url('http://dl.dropbox.com/u/25006518/bold.png');

}

#italic{
  display:block;
  width:30px;
  height:30px;
  background-image:url('http://dl.dropbox.com/u/25006518/italic.png');

}

#underline{
  display:block;
  width:30px;
  height:30px;
  background-image:url('http://dl.dropbox.com/u/25006518/underline.png');

}

#justifyCenter{
  display:block;
  width:30px;
  height:30px;
  background-image:url('http://dl.dropbox.com/u/25006518/underline.png');

}

#justifyRight{
  display:block;
  width:30px;
  height:30px;
  background-image:url('http://dl.dropbox.com/u/25006518/underline.png');

}

#justifyRight{
  display:block;
  width:30px;
  height:30px;
  background-image:url('http://dl.dropbox.com/u/25006518/underline.png');

}

Answer 1

如果将jQuery更新为v1.7.1，则可以使用.on（）函数。这将允许您使用id将click方法绑定到span。

$(document).ready(function(){
   $("#yourContainer").on("click", "#yourSpanID", function(){
      // The code to make everything bold
   });
});

Answer 2

任何DOM元素都可以监听“click”事件，事实上，您提供的代码在这个意义上是有效的。如果您在使用alert语句调用document.execCommand之前，您会发现只要您单击任何按钮而不仅仅是“粗体”按钮，就会发出警报。

Answer 3

您正在以错误的方式使用span标签; span标签用于在一个句子中对一个单词进行着色和样式化。

最好的办法是使用<ul>标记;你必须结束它。像这样：

<html>
<body>

<ul>

<li><a href="put a link file here if you want">"put your text here"</a></li>
<li><a href="put a link file here if you want">"put your text here"</a></li>
<li><a href="put a link file here if you want">"put your text here"</a></li>

</ul>

</body>
</html>

现在假设你有一个样式表，你可以在CSS中设置样式或用户列表像这样：

html{  }
body{  }

ul{  }
ul li{ float:left; this will define how the tags are displayed }
ul li a{ "from here down define how links act." }
ul li a:visited{ color:put a color here like light blue or something;}
ul li a:hover{ color:same with this; }
ul li a:active{color:same with this; }

同时检查您的层次结构，从长远来看它会对您有所帮助。希望我帮忙。

Answer 4

我认为变量'value'在迭代完成后会被破坏。您可以创建一个全局函数来处理实际的单击句柄，并将此函数分配给迭代中的按钮。

您可以获取在全局函数中单击的按钮的ID，并使用它在execCommand方法中作为参数进行解析。

所以这是一个范围问题，要清楚。

Answer 5

尝试将范围设置为display: inline-block。

Answer 6

这不是最佳解决方案，但我想要使用跨度的唯一原因是，当您单击带有href="#"的锚标记时，页面不会跳到顶部。我决定只使用锚标签，但不是使用href="#"而是使用href="#bold"。显然，当您使用id选择器作为href属性时，页面将跳转到该元素所在页面上的位置。仍然不确定为什么它不能与其他元素一起使用。我试图摆脱迭代器并为每个按钮写出单独的单击事件，但它仍然只能使用锚标记。

Answer 7

仍在尝试更深入地研究'onclick'事件，但存在以下两种情况之一： 1）onclick仅为'a'和'input'标签保留（将设置为验证这一点）;要么， 2）事件处理程序需要更复杂的方法。参见W3C：http://www.w3.org/TR/html5/webappapis.html#event-handler-content-attributes

附注：在确定'a'之后，可以将样式表简化为'id'上的后台URL，并在控件上添加后代选择器：

#controls a {
 display: block;
 width: 30px;
 height: 30px;
}

Answer 8

当你将mousedown事件附加到你取消的范围时，span也可以。不知道哪个（如果有的话）规范定义了跨度和锚点上的不同行为，但它现在有效。请参阅jsFiddle。改变了以下部分：

$('#'+value).click(function(event){
    document.execCommand( value, false, null);
    $('#rte').focus();
    return false;
}).mousedown(function(e){
    e.preventDefault(); 
});

Answer 9

您应该使用live或on来代替点击事件这会将click事件绑定到所有元素，即使它们是动态创建的。

Answer 10

首先，使用Doctype：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

然后，对于span的CSS，请使用：

span{
    display: block;
    display: inline-block;
}

为什么单击事件不会在某个范围内起作用，但是它会在a上运行？

10 个答案: